核心提示：日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移...
日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。
所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。
我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移出。
在此期间，会产生3个彼此关联的动画。
首先是月亮的位置移动，我们通过改变月亮的X坐标（left或right属性值）来实现（注意把太阳和月亮均设置成绝对定位）。
其次太阳会逐步呈现出圆晕的光线效果，我们使用框阴影（box-shadow）来实现。
box-shadow: 0px 0px 10px 5px #FFAD00;最后与此同步的是，整个页面背景要呈现一个变暗的效果，这个比较简单，改变body的background-color即可。
剩下的事情就是针对以上阶段编写关键帧（keyframes）的CSS规则即可。
