Introduction:

Add a touch of magic to your website with a stunning moonlit night sky animation. In this tutorial, we'll explore how to create this effect using CSS keyframe animations.
The Code:

HTML

HTML<div class="night-sky">
  <div class="moon"></div>
  <div class="stars">
    <div class="star star1"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
  </div>
  <div class="craters">
    <div class="crater crater1"></div>
    <div class="crater crater2"></div>
    <div class="crater crater3"></div>
    <div class="crater crater4"></div>
    <div class="crater crater5"></div>
    <div class="crater crater6"></div>
  </div>
  <a href="https://codecrafti.blogspot.com" target="_blank" class="blog-link">CodeCrafti Blog</a>
</div>

CSS

CSS.night-sky {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to top, #343a40, #1a1d23);
  overflow: hidden;
}

.moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7f7f7, #c7c7c7);
  box-shadow: 0 0 70px 10px #f5e4e4ab, 0 0 70px 20px #ca69b5dc, 0 0 70px 30px #e772e1dc;
  animation: moon-glow 5s infinite, moon-move 10s infinite;
}

/* ... rest of the CSS code ... */
Explanation:
This animation uses:
  • CSS keyframe animations for the moon's movement and glow
  • Absolute positioning for the stars and craters
  • Radial gradients for the moon's texture
Step-by-Step Breakdown:
  1. Create the HTML structure for the night sky, moon, stars, and craters.
  2. Define the CSS styles for the night sky, moon, stars, and craters.
  3. Add keyframe animations for the moon's movement and glow.
Conclusion:
With this tutorial, you've learned how to create a mesmerizing moonlit night sky animation using CSS. Experiment with different colors, sizes, and animations to make it your own!
Demo:


Live Demo 
Share your thoughts:
What do you think of this animation? How would you enhance it? Share your ideas in the comments!