延續(xù)上次講的接下來實際制作一個常見的“CSS3動畫頭+內容+內容+內容”的頁面，這樣的頁面應用范圍也比較廣，經(jīng)?？吹饺珧v訊游戲活動頁面、迅雷、淘寶等，都是這樣完成的，相對于比較靜態(tài)單調的頁面，更能讓大家去接受，去閱讀。 下面我就已迅雷的一個活動頁面做范本。

  

demo頁面

header 
我們先把整體框架頁面講完再講頂部的css3動畫

css部分
這里的圖片是用的雪碧圖（png小圖和在一起的）所以用了background-position選擇圖片的位置

html部分cont01\cont02\cont03\cont04
下面的我們就直接過了，只把html放出來，css太長就不放出來了，因為重點在下面的css3上。最后我還是會把這個頁面的代碼打包給大家的。

html部分

CSS3動畫

太陽
這里有幾個要注意的 一要加瀏覽器的兼容前綴，上一次有提到。二要注意關鍵幀的名字。三注意關鍵幀的應用。
-webkit-是兼容Safari 和 Chrome的前綴 
@keyframes 動畫的名稱：fadeln；完成周期是1.5秒；延遲1秒，后開始； 速度曲線ease（默認。動畫以低速開始，然后加快，在結束前變慢）；規(guī)定動畫在播放之前或之后都被應用
關鍵幀0%的時候透明度為0，Y軸向上偏離50像素， 關鍵幀80%的時候透明度100%Y軸向下偏離2像素， 關鍵幀100%回到原始位置

循環(huán)飄動的云
這個是無限循環(huán)播放，要注意關鍵幀的點的位置。infinite這個是無限循環(huán)；alternate輪流反向播放
@keyframes 動畫的名稱：float；完成周期是6秒； 速度曲線linear 勻速運動；無限循環(huán)播放；輪流反向播放 
關鍵幀0%時X軸在原點；關鍵幀33%時X軸上向右偏離80像素； 關鍵幀66%復位原點；關鍵幀100%X軸上向左偏離80像素

3d飄帶
這個關鍵幀有點不同，但不多講了想了解的可以去W3C上看

大字

小字和時間人物
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉;scale是指放大縮小默認是1

總結：

css3熟悉以后還好，剛開始肯定有點搞，也可以借助工具，上次講到的動畫庫animate.css，也還可以借助個人蠻喜歡的騰訊的動畫工具來使用。好了，CSS3動畫篇到這里就告一段落了。希望你們喜歡哈，發(fā)現(xiàn)蠻多人看了關注了也不問啥，可以和我互動下，會與不會的我都會回答的。

下次就要開始講移動端的一些事了，會分享給大家一些注意點啊，框架啊，一些比較好的東西，還會涉及到js。每次寫東西不是想到什么就寫。而是我自己也在學，所以可以多留言，一些互相進步。