首先來看一下效果：（這些個電影畫風好溫柔...）
0、先講一個CSS3的動畫用法
animation基本用法是：animation: name keeping-time animate-function delay times iteration final;
- 第一個參數：name (animation-name)：
動畫的名字，CSS3采用“關鍵幀 keyframes”來定義動畫,如下第4個步驟展示；
1 @keyframes image{ 2 0%{opacity: 0;} 3 100%{opacity:1;} 4 } 5 /*或者*/ 6 @keyframes image{ 7 from{opacity: 0;} 8 to{opacity: 1;} 9 }
- 第二個參數 keeping-time (animation-duration)：
動畫的持續時間，單位s或者ms（一定要帶時間單位）；
- 第三個參數 animate-function (animation-timing-function)：
（動畫方式）的貝賽爾曲線，可取值有：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；
- 第四個參數 delay (animation-delay)：
動畫延遲執行的時間，單位為s或者ms{即使延遲時間為0，也必須加上時間單位，如果寫成直接寫成0，在Chrome和Safari(webkit)下是沒問題的，但是在FF(gecko)下無效}；
- 第五個參數 times (animation-iteration-count)：
動畫循環執行的次數，使用infinite值為無限循環；
- 第六個參數 iteration (animation-direction)：
如果動畫循環，循環的方式有：alternate(偶數次向前播放，奇數次向后播放)和normal(每次都向前播放)；
- 第七個參數 final (animation-fill-mode)：
動畫達到100%時的狀態，取值有：backward（回到初始狀態）、forwards（停在最終狀態）、none、both。
以上7個參數不定要全部都有，不需要的效果可以不寫，如我這里只用到4個參數：
1 animation: image 24s linear infinite;
1、先在<body>里把圖片貼進來，每個li下面再給一個標題
1 <ul class="name"> 2 <li> 3 <span><img src="img/img01.jpg" alt="" /></span> 4 <div><h3>哈爾的移動城堡</h3></div> 5 </li> 6 <li> 7 <span><img src="img/img02.jpg" alt="" /></span> 8 <div><h3>火隱忍者</h3></div> 9 </li> 10 <li> 11 <span><img src="img/img03.jpg" alt="" /></span> 12 <div><h3>海賊王</h3></div> 13 </li> 14 <li> 15 <span><img src="img/img04.jpg" alt="" /></span> 16 <div><h3>紅豬</h3></div> 17 </li> 18 <li> 19 <span><img src="img/img05.jpg" alt="" /></span> 20 <div><h3>起風了</h3></div> 21 </li> 22 <li> 23 <span><img src="img/img06.jpg" alt="" /></span> 24 <div><h3>龍貓</h3></div> 25 </li> 26 </ul>
2、給樣式，自己給一個寬度、高度(我這里直接滿屏顯示，^_^懶...),給圖片一個動畫名稱image；
給標題一個動畫名稱title。
1 ody{ 2 background: #222; 3 font-size: 16px; 4 color: #999; 5 font-weight: 400; 6 overflow: hidden; 7 } 8 ul{ 9 list-style: none; 10 } 11 .name{ 12 position: fixed; 13 width: 100%; 14 height: 100%; 15 top: 0; 16 left: 0; 17 } 18 .name li span{ 19 width: 100%; 20 height: 100%; 21 position: absolute; 22 top: 0; 23 left: 0; 24 opacity: 0; 25 animation: image 24s linear infinite; /*infinite無限循環*/ 26 -webkit-animation: image 24s linear infinite; 27 } 28 .name li span img{ 29 width: 100%; 30 height: auto;100% 31 } 32 .name li div{ 33 z-index: 10; 34 position: absolute; 35 bottom: 100px; 36 width: 100%; 37 text-align: center; 38 opacity: 0; 39 color: #fff; 40 animation: title 24s linear infinite; 41 -webkit-animation: title 24s linear infinite;; 42 }
【注】：
別忘了內外邊距置0，*{margin: 0;padding: 0;}
由於每個圖片的背景顏色塊的值不同，所以我們選擇title顏色的時，很難保證不會與背景融合，顯示效果會差，我們有很多種方法解決這個問題，不多說，我這里給title一個隨機位置效果，top和left值根據自己圖片調整，調整時將之前設置的opacity透明度設為1下調整效果，再置為0，也可以解決這個問題：
1 /*title位置*/ 2 .name li:nth-child(2) div{ 3 top: 100px; 4 left: -500px; 5 } 6 .name li:nth-child(3) div{ 7 top: 320px; 8 left: 400px; 9 } 10 .name li:nth-child(4) div{ 11 top: 400px; 12 left: -100px; 13 } 14 .name li:nth-child(5) div{ 15 top: 190px; 16 left: 200px; 17 } 18 .name li:nth-child(6) div{ 19 top: 200px; 20 left: -100px; 21 } 22 .name li div h3{ 23 font-size: 40px; 24 line-height: 100px; 25 }
效果顯示：
3、設置每張圖片和對應title的延時顯示時間
1 /*延時顯示*/ 2 .name li:nth-child(1) span, 3 .name li:nth-child(1) div{ 4 animation-delay: 0s; 5 -webkit-animation-delay: 0s; 6 } 7 .name li:nth-child(2) span, 8 .name li:nth-child(2) div{ 9 animation-delay: 4s; 10 -webkit-animation-delay: 4s; 11 } 12 .name li:nth-child(3) span, 13 .name li:nth-child(3) div{ 14 animation-delay: 8s; 15 -webkit-animation-delay: 8s; 16 } 17 .name li:nth-child(4) span, 18 .name li:nth-child(4) div{ 19 animation-delay: 12s; 20 -webkit-animation-delay: 12s; 21 } 22 .name li:nth-child(5) span, 23 .name li:nth-child(5) div{ 24 animation-delay: 16s; 25 -webkit-animation-delay: 16s; 26 } 27 .name li:nth-child(6) span, 28 .name li:nth-child(6) div{ 29 animation-delay: 20s; 30 -webkit-animation-delay: 20s; 31 }
4、給出關鍵幀動畫
1 @keyframes image{ 2 0%{opacity: 0;} 3 8%{opacity: 1;} 4 16%{opacity: 1;} 5 26%{opacity: 0;} 6 100%{opacity: 0;} 7 } 8 @-webkit-keyframes image{ 9 0%{opacity: 0;} 10 8%{opacity: 1;} 11 16%{opacity: 1;} 12 26%{opacity: 0;} 13 100%{opacity: 0;} 14 } 15 @keyframes title{ 16 0%{opacity: 0;} 17 8%{opacity: 1;} 18 16%{opacity: 1;} 19 26%{opacity: 0;} 20 100%{opacity: 0;} 21 } 22 @-webkit-keyframes title{ 23 0%{opacity: 0;} 24 8%{opacity: 1;} 25 16%{opacity: 1;} 26 26%{opacity: 0;} 27 100%{opacity: 0;} 28 }
【注】：
之前定義動畫名稱image和title時給的animation時間為24s，所以平均分給6張圖片是每張4秒，剛開始加載的時候可能比較慢，加載完就好了，如果覺得顯示太快或者太慢，可以微調整。
自己犯過一個錯，調了每個li的時間，但是總時間、image動畫時間、title動畫時間對不上，因為是循環播放，循環幾輪之后就很明顯看到，圖片和title的顯示不一致，切記所有時間要對的上！！