Animating things with CSS: Creating a moon

Additionally, we will use a simple JavaScript to draw as many stars as we want positioned in random locations; the result is the following using CSS animations:

Building our Moon in three steps

1. The base and the halo of the Moon

We will build the basic structure of the Moon, which is simply a circumference with a halo that varies its brightness through an animation using the well-known box-shadow property:

    #moon{
        position:absolute;
        top:15%;
        right:50%;
        right:calc(50% - 100px);
        width:200px;
        height:200px;
        border-radius:50%;
        background:#CCC;
        box-shadow:0px 0px 100px #FFFF8C;
        z-index:5;
        animation: moonAnimation 3s infinite;
    }
    @keyframes "moonAnimation" { 0% { box-shadow: 0px 0px 100px #FFF; } 50% { box-shadow: 0px 0px 140px #FFF; } 100% { box-shadow: 0px 0px 100px #FFF; } }

So far, the Moon looks like this:

2. The craters and the phases of the Moon

We also mentioned that we will place an overlapping layer (hover) which will be animated and show the phases of the Moon although several of these phases are not exact (it is a simple experiment, do not expect exact behavior -.-); furthermore, this layer -div- is the one that will contain the craters which have varied shapes; we can add as many craters as we want where each crater represents a div; for our example, seven craters are enough:

  #moonFase{
        position:absolute;
        top:15%;
        right:50%;
        right:calc(50% - 100px);
        width:200px;
        height:200px;
        border-radius:50%;
        background: rgba(153,153,153,0);
        box-shadow: inset -25px 0px 0 0px #999;
        z-index:6;
        animation: moonFaseAnimation 600s infinite;
    }
    .crater{
        position:absolute;
        background:#555;
        box-shadow: inset 3px -2px 0 0px #414043;
        z-index:7;
    }
    .crater1{
        top:30px;
        left:40px;
        width:25px;
        height:45px;
        border-top-right-radius:50px 100px;
        border-top-left-radius:50px 100px;
        border-bottom-right-radius:50px 100px;
        border-bottom-left-radius:50px 100px;
        transform:rotate(40deg);
    }

To avoid making this post too long, only the CSS for one crater is shown; see the full example in the download links at the beginning and end of this post.

To give an extra touch to the craters, we will also use the box-shadow property again, but this time to act as an internal border using the inset value, remembering a previous post where we created some fantastic BUTTONS WITH SLIDING BACKGROUND IN CSS which you can see in the previous link.

Our completed moon now looks like this:

3. Stars with JavaScript

As we mentioned at the beginning, to give our Moon a slightly more interesting look, we will place a series of randomly positioned stars; since it is too much work to place more than a hundred stars manually, we will do it programmatically with the help of a simple JavaScript that practically explains itself:

 // determine the screen size 
             var w = window.innerWidth;
            var h = window.innerHeight;

            for (i = 0; i < 250; i++) {
                wRan = Math.floor(Math.random() * w);
                hRan = Math.floor(Math.random() * h);
                var star = document.createElement("div");
                star.setAttribute("class", "star");
                star.style.bottom = hRan + "px";
                star.style.right = wRan + "px";
                document.body.appendChild(star);
            } 

In case you have doubts about how we defined the .star class:

    .star {
        width: 2px;
        height: 2px;
        border-radius: 2px;
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.6);
        position: absolute;
    }  

It is also possible to vary the brightness of the stars with an animation, but to keep this experiment as simple as possible, we will leave it as is.

Finally, you can calmly view the experiment in a separate link and make any changes you want with it; to save it, simply right-click and "Save as" or use the keyboard shortcut "Ctrl + s":

The next example I recommend you check out to keep learning is how to highlight content in an animated way with CSS.