Implement a eclipse animation using pure CSS3

Implement a eclipse animation using pure CSS3

The eclipse phenomenon is that the Moon blocks between the Earth and the Sun, that is, the Moon blocks the sun.

Therefore, to construct an eclipse, we need two objects: one representing the Moon and the other representing the sun.

We break down the entire eclipse process into three phases: 1. Slowly moving into 2. temporarily staying 3. Slowly moving out.

During this period, three associated animations are generated.

First, the position of the moon is moved. We can change the X coordinate of the Moon (left or right attribute value) (note that the sun and the moon are set to absolute positioning ).

Next, the sun will gradually show a halo of light, which we will use box-shadow to implement.

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

At last, it is synchronized that the background of the entire page should be dimmed. This is relatively simple, just change the background-color of the body.
The rest is to compile the CSS rules of the key frames (keyframes) for the above stages.