1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] 利用CSS3動畫,實作圖片輪播效果(免用JS!)

[教學] 利用CSS3動畫,實作圖片輪播效果(免用JS!)

2018/03/19

梅問題-[教學] 利用CSS3動畫,實作出圖片輪播效果(免用JS喔!)

  圖片輪播是一個相當常用的網頁特效,但有經驗的朋友都知道,當今天要使用圖片輪播,一定得用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">&gt;</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">&gt;</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動畫製作圖片輪播效果,是再簡單不過的啦!有需要的朋友,也可參考看看囉!