Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to Make Moon Animation Using Pure CSS
    HTML & CSS

    How to Make Moon Animation Using Pure CSS

    Coding StellaBy Coding Stella5 January 2024Updated:12 January 2024No Comments3 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hey everyone, welcome to today’s blog post! Today, we’re delving into the creation of a mesmerizing moon animation using only HTML and CSS. No need for images, icons, or external libraries – just the power of CSS at work!

    This blog post is all about the joy of exploration and experimentation. While this particular animation might not have direct real-world application, it’s an incredible opportunity to play around with various CSS properties and enhance your skillset. If you’re new to CSS and looking to spruce up your abilities, this blog post is an ideal playground for your learning journey.

    Join us as we embark on this creative endeavor – let’s dive into the world of CSS and craft something delightful together!

    HTML :

    This HTML code creates a container with letters ‘M’ and ‘N’. Inside, there’s a moon orbiting an ‘O’. The container has classes for styling, while ‘letter-M’ and ‘letter-N’ mark paragraphs for individual letters ‘M’ and ‘N’. The ‘moon’ div contains an ‘orbit’ div with a letter ‘O’.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Moon Animation</title>
        <!-- Google Font -->
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
          rel="stylesheet"
        />
        <!-- Stylesheet -->
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div class="container">
          <p class="letter letter-M">M</p>
          <div class="moon">
            <div class="orbit">
              <p>O</p>
            </div>
          </div>
          <p class="letter letter-N">N</p>
        </div>
      </body>
    </html>

    CSS :

    This CSS code sets up a page with a Montserrat font, a dark background color, and a centered container. Paragraphs with classes ‘letter-M’ and ‘letter-N’ position their text letters. A ‘moon’ div with an ‘orbit’ spins using CSS animation. Media query adjusts font size for wider screens (>700px).

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: "Montserrat", sans-serif;
    }
    body {
      background-color: #21233c;
    }
    .container {
      height: 31.25em;
      width: 31.25em;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      color: #ffffff;
    }
    p.letter {
      font-size: 3.5em;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
    }
    .letter-M {
      left: 0.2em;
    }
    .letter-N {
      right: 0.2em;
    }
    .moon {
      background-color: #f5f5f5;
      height: 8em;
      width: 8em;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      box-shadow: 0 0 0 0.6em rgba(255, 255, 255, 0.05),
        0 0 0 1.2em rgba(255, 255, 255, 0.05), 0 0 0 1.8em rgba(255, 255, 255, 0.05);
    }
    .moon:after {
      position: absolute;
      content: "";
      background-color: #e6e6e6;
      height: 0.9em;
      width: 0.9em;
      border-radius: 50%;
      top: 3.75em;
      left: 1.25em;
      box-shadow: 0.9em -2.1em 0 0.2em #e6e6e6, 1.5em -0.3em 0 -0.06em #e6e6e6;
    }
    .orbit {
      height: 18.75em;
      width: 18.75em;
      border-radius: 50%;
      position: absolute;
      left: -5.2em;
      bottom: -5.2em;
      animation: spin 8s infinite linear;
    }
    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }
    .orbit p {
      position: absolute;
      font-size: 3.5em;
      top: 0.25em;
      left: 0.25em;
    }
    @media screen and (min-width: 700px) {
      .container {
        font-size: 20px;
      }
    }

    In a nutshell, the HTML and CSS work together to make a cool moon animation. The moon spins and looks nice with shadows, thanks to CSS magic. The webpage ends up having a pretty, moving moon that catches your eye.

    If you run into any hiccups with your moon animation, worry not. You can easily grab the source code for this project. Just hit the Download button to get started on your coding adventure. Happy coding!

    Animation CSS Animation Moon Animation
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to Make Rock Paper Scissors Game in HTML CSS & JavaScript
    Next Article How to Create 3D Hovering Cards using HTML CSS
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025
    HTML & CSS

    How to create Solar System Explorer using HTML and CSS

    31 July 2025
    HTML & CSS

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202421K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202420K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202418K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to Make Rock Paper Scissors Game in HTML CSS & JavaScript

    4 January 2024

    How to Create 3D Hovering Cards using HTML CSS

    10 January 2024

    How to make Alarm App in HTML CSS & JavaScript

    16 February 2024

    How to make Hand Scanning Animation using HTML & CSS

    12 January 2024
    Latest Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood