[教學] 利用CSS3動畫，實作圖片輪播效果(免用JS！)
2018/03/19![梅問題－[教學] 利用CSS3動畫，實作出圖片輪播效果(免用JS喔！)](http://photo.minwt.com/img/Content/CSS/css3-animation-silder/css3-animation-silder_00.jpg)
圖片輪播是一個相當常用的網頁特效，但有經驗的朋友都知道，當今天要使用圖片輪播，一定得用JavaScript再搭配CSS，才能實作出圖片輪播的特效，雖然說網路上，已有不少的圖片輪播的jQuery套件，當要使用時，只需將jQuery與套件的js檔，一併引用到網頁後，再依照模組所設定的HTML架構建立，就可快速的實現圖片輪播的效果，甚至預設不滿意時，還可透過javascript參數，來控制圖片輪播的時間與效果，雖然說大部分的套件在設定都相當的簡單，但說真的還是得具備一些基本的javascript觀念會比較好上手。
而這對於許多網頁設計師而言，總是套的一把眼淚一把鼻涕，一來是對於套件不熟悉，二來是對於javascript完全沒概念，因此當出錯時，也完全無感，不知到底那邊出錯，因此梅干今天要來分享一個，網頁設計絕對的方法，那就是透過CSS3的動畫屬性，就能實現在圖片輪播效果，甚至還可以滑鼠滑入時，停止播放，而這些完全無需使用到javascript，單純的CSS就可以完成囉！因此有需要的朋友，現在也一塊來看看囉！
Step1
首先，分別會用到CSS3的transitions 漸變屬性與animation 動畫屬性，而下方是關於這二屬性的基本語法，因此各位只要了解一下就可以了。
CSS3 transitions 漸變屬性
| 屬性 | 說明 |
|---|---|
| transition-property | 漸變屬性名稱 |
| transition-duration | 漸變持續時間 |
| transition-timing-function | 漸變速度曲線 |
| transition-delay | 漸變延遲時間 |
CSS3 animation 動畫屬性
| 屬性 | 說明 |
|---|---|
| @keyframes | 定義動畫關鍵影格，與Flash概念相同 |
| animation-name | @keyframes動畫名稱 |
| animation-duration | 動畫持續時間 (預設：0) |
| animation-timing-function | 動畫的速度曲線 (預設：ease) |
| animation-delay | 動畫延遲時間 (預設：0) |
| animation-iteration-count | 動畫播放次數 (預設：1) |
| animation-direction | 動畫播放順序 (預設：normal) |
| animation-play-state | 動畫狀態 (預設：running)。 |
Step2
在對CSS3動畫屬性有基本的認識後，接下來就開始來實作囉！首先建立HTML的結構。
<div class="coverflow"> <a href="#"><img src="01.jpg"></a> <a href="#"><img src="02.jpg"></a> <a href="#"><img src="03.jpg"></a> </div>
Step3
接著再把下方的CSS樣式輸入，這樣就大功告成啦！而這邊梅干稍為解釋一下，由於梅干讓每張圖片都有5秒的時間，因此當在設定keyframes時，就得特別注意，由於動畫總長度為15秒，這時就用15秒去乘影格的百分比，所以當圖片有增加時，需修改影片的長度，以及播放的百分比，否則就會造成動畫顯示出問題喔！
.coverflow{ width: 700px; height: 490px; position: relative; } .coverflow>a{ display: block; position: absolute; top:0; left:0; opacity: 0; filter: alpha(opacity=0); /*當圖片數量增加，影片長度需更改，變為5s圖片數量/ -webkit-animation: silder 15s linear infinite; animation: silder 15s linear infinite; } .coverflow>a>img{ max-width: 100%; }/動畫關鍵影格/ @-webkit-keyframes silder { 3% { opacity: 1; filter: alpha(opacity=100); } 27% { opacity: 1; filter: alpha(opacity=100); } 30% { opacity: 0; filter: alpha(opacity=0); } } @keyframes silder { 3% { opacity: 1; filter: alpha(opacity=100); } 27% { opacity: 1; filter: alpha(opacity=100); } 30% { opacity: 0; filter: alpha(opacity=0); } }
/每個圖片各延遲5秒/ .coverflow>a:nth-child(3) { -webkit-animation-delay: 10s; animation-delay: 10s;
}<span style="color: #BB0066; font-weight: bold">.coverflow</span><span style="color: #333333">></span><span style="color: #007700">a</span><span style="color: #555555; font-weight: bold">:nth-child</span><span style="color: #333333">(</span><span style="color: #007700">2</span><span style="color: #333333">)</span> { <span style="color: #333333">-</span>webkit<span style="color: #333333">-</span>animation<span style="color: #333333">-</span>delay<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">5s</span>; animation<span style="color: #333333">-</span>delay<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">5s</span>; } <span style="color: #BB0066; font-weight: bold">.coverflow</span><span style="color: #333333">></span><span style="color: #007700">a</span><span style="color: #555555; font-weight: bold">:nth-child</span><span style="color: #333333">(</span><span style="color: #007700">1</span><span style="color: #333333">)</span> { <span style="color: #333333">-</span>webkit<span style="color: #333333">-</span>animation<span style="color: #333333">-</span>delay<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">0s</span>; animation<span style="color: #333333">-</span>delay<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">0s</span>; }/滑入時停止播放/ .coverflow:hover>a{ -webkit-animation-play-state: paused; animation-play-state: paused; }
Step4
因此透過CSS3動畫製作圖片輪播效果，是再簡單不過的啦！有需要的朋友，也可參考看看囉！
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。
回應本文