Using pure CSS3 to achieve an eclipse animation

The eclipse phenomenon is that the moon blocks between the Earth and the Sun, which is where the moon obscures the sun.

So to construct a solar eclipse, we need 2 objects: one for the moon and one for the sun.

<div class= "Eclipse Sun" ></div><div class= "Eclipse Moon" ></div>

We break the whole eclipse process into 3 stages: 1. Slowly move in 2. A short stay of 3. Slowly move out.

During this time, 3 animations associated with each other are generated.

First, the position of the moon moves, and we do this by changing the x-coordinate of the moon (left or right property values) (Note that the sun and the moon are set to absolute positioning).

Next the sun will gradually show the halo effect, we use the Box Shadow (Box-shadow) to achieve.

box-shadow:0px 0px 10px 5px #FFAD00;

Finally with this synchronization is, the entire page background to render a darkened effect, this is relatively simple, change the body of the background-color can be.
The rest is the CSS rules for writing key frames (keyframes) for the above phase.

You can try it yourself.

by Iefreer

Using pure CSS3 to achieve an eclipse animation