首先先看demo吧，點擊查看demo

一、隨便說幾句

css3動畫效果的強大不言而喻，自它出現一直熱度不減，它與js動畫的優(yōu)劣也一直成為前端界爭論的話題，不可置疑的是css3動畫的出現在一定程度上降低了動畫效果的實現難度，利于前端的學習，其精簡的代碼量把我們從煩人的js調試中解放出來，當然css的動畫效果有其局限性，我們不能只用css3模擬出全部的就是動畫，另外就是瀏覽器的兼容性問題。我們這次用css3實現一個輪播圖效果，體驗一下css3的強大。首先說明我們可次只實現了自動輪播，效果也是最常見的淡入淡出，并未實現點擊輪換效果，至少在我目前水平來看，自動輪播與點擊輪換兩者純css3只能選其一，如果可以同時實現兩種效果的方法，請告訴我。

二、布局

html代碼沒有什么可說的，樣式的話首先必定slider的大盒子必定是相對定位，另外我們采用在li標簽中添加background-image，因為這樣才有可能用純的css實現響應式，另外背景圖為了在響應式中看清全貌，必然使用background-size:100%，另外就是高度問題了，顯然slider-container必需是和li的高度一致，因為響應式中必然這個高度不能固定死，所以使用height屬性顯然不行，padding屬性可以解決這個問題，一是background-image可以顯示在padding中，二是padding中以%為單位是以父元素寬度為基準的。

三、設計動畫

淡入淡出效果肯定是使用opacity，首先整體來看所有圖片的淡入淡出都是同一個動畫，只是時間不一樣而已，這肯定是利用animation-delay來控制，動畫無限輪換肯定使用animation-iteration-count: infinite，我們這次5張圖片，整個動畫分為圖片停留和淡入淡出兩個效果，用下圖表示，箭頭表示淡入淡出過程。