日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。
所以要構造日食，我們需要2個對象：一個代表月亮，一個代表太陽。
<div class="eclipse sun"></div>
<div class="eclipse moon"></div>我們把整個日食過程分解爲3個階段：1. 緩慢移入 2. 短暫停留 3. 緩慢移出。
在此期間，會產生3個彼此關聯的動畫。
首先是月亮的位置移動，我們通過改變月亮的X座標（left或right屬性值）來實現（注意把太陽和月亮均設置成絕對定位）。
其次太陽會逐步呈現出圓暈的光線效果，我們使用框陰影（box-shadow）來實現。
box-shadow: 0px 0px 10px 5px #FFAD00;剩下的事情就是針對以上階段編寫關鍵幀（keyframes）的CSS規則即可。
你可以自己試試看 （http://wow.techbrood.com/fiddle/6372）。