[教學] 利用CSS3動畫,實作圖片輪播效果(免用JS!)
2018/03/19![梅問題-[教學] 利用CSS3動畫,實作出圖片輪播效果(免用JS喔!)](https://dsf.minwt.com/img/Content/CSS/css3-animation-silder/css3-animation-silder_00.jpg)
而這對於許多網頁設計師而言,總是套的一把眼淚一把鼻涕,一來是對於套件不熟悉,二來是對於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; } .coverflow>a:nth-child(2) { -webkit-animation-delay: 5s; animation-delay: 5s; } .coverflow>a:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } /*滑入時停止播放*/ .coverflow:hover>a{ -webkit-animation-play-state: paused; animation-play-state: paused; }
Step4
因此透過CSS3動畫製作圖片輪播效果,是再簡單不過的啦!有需要的朋友,也可參考看看囉!
引用網址:※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。
回應本篇