使用純CSS3實現一個日食動畫

標籤：content   dpm   bbb   aaaaa   vnc   tld   vsx   ceo   htc   

日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。

所以要構造日食，我們須要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;

最後與此同步的是，整個頁面背景要呈現一個變暗的效果，這個比較簡單。改變body的background-color就可以。

剩下的事情就是針對以上階段編寫主要畫面格（keyframes）的CSS規則就可以。

你能夠自己試試看 （http://wow.techbrood.com/fiddle/6372）。

by iefreer

使用純CSS3實現一個日食動畫