日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。
所以要構造日食，我們須要2個物件：乙個代表月亮，乙個代表太陽。
我們把整個日食過程分解為3個階段：1. 緩慢移入 2. 短暫停留 3. 緩慢移出。
在此期間。會產生3個彼此關聯的動畫。
首先是月亮的位置移動，我們通過改變月亮的x座標（left或right屬性值）來實現（注意把太陽和月亮均設定成絕對定位）。
其次太陽會逐步呈現出圓暈的光線效果，我們使用框陰影（box-shadow）來實現。
box-shadow: 0px 0px 10px 5px #ffad00;剩下的事情就是針對以上階段編寫關鍵幀（keyframes）的css規則就可以。
你能夠自己試試看 （
by iefreer
純css3實現圓盤時鐘動畫效果
先讓我們來看下整體效果，請看下圖 作為小白的我，看到別人寫的鐘錶特效有點心動，於是自己也動手寫了乙個，主要是為了練練腦子，接下來直接看 html css樣式 t2 t3.t3 before t3 after t4.t4 i.t4 before t4 after hour hour3 hour6 ho...
純CSS3冒泡動畫按鈕實現教程
接下來我們來講解一下這款css3氣泡動畫的按鈕實現過程，主要由html 和css 組成。div id buttoncontainer a href big button a a href big button a a href big button a a href big button a a h...
純css3實現的動畫載入條
之前大大家分享了很多款載入條。今天給大家帶來一款純css3實現的動畫載入條。這款載入條適用瀏覽器 360 firefox chrome safari opera 傲遊 搜狗 世界之窗.不支援ie8及以下瀏覽器。效果圖如下 實現的 html div class div class bar p clas...