簡單究好 Simple is Best

網頁前端開發資訊

如何單純使用CSS3及HTML製作圖片輪播效果

你知道嗎?有了CSS3,就算不用javascript,我們也可以製作出圖片輪播效果。今天這篇文章就要示範如何單純使用CSS3及HTML製作圖片輪播效果

pure css slider
pure css slider
pure css slider
pure css slider
pure css slider

要製作純 CSS的輪播效果、就要先充份了解 CSS3 的 transitions 和 animation

CSS3 TRANSITIONS

一般當CSS屬性改變的時候、變化的效果是立即的。但是有了CSS3 transitions之後,我們可以達到漸變的動畫效果。

CSS3 transitions有四種屬性
屬性 說明
transition-property 定義套用漸變的屬性名稱
transition-duration 定義完成漸變效果的時間
transition-timing-function 定義漸變效果的速度曲線
transition-delay 定義漸變效果開始的時間
transition 定義漸變效果屬性的簡寫屬性
transition: property duration timing-function delay;
支援CSS3 transitions的瀏覽器
Property IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
-webkit-transition 4+ 4+ 3.1+ 11.5+ 3.2 + 2.1+
transform 10+ 31+ 31+ 7+ 27+ 7.1 + 4.4+ 41+

W3C Animatable Properties詳細列出了哪些CSS屬性可以套用漸變的效果。


讓我們實際用CSS3 transitions來做一個滑鼠滑入的效果

<div class="eg-CSS3-transitions">
滑鼠滑上來看看<br>
使用CSS3 transitions漸變效果
</div>
<div class="eg-normal">
滑鼠滑上來看看<br>
沒有CSS3 transitions漸變效果
</div>

當滑鼠移到<div class="eg-CSS3-transitions><div class="eg-normal>的上面時、該區塊的寬度由原本的250px、變為300px


div.eg-CSS3-transitions,
div.eg-normal {
    width: 250px;
    padding: 15px;
    background-color: #83CDBE;
    margin: .5em;
    box-sizing: border-box ;
    color: #fff;
}
div.eg-CSS3-transitions:hover,
div.eg-normal:hover {
    width: 300px;
}
div.eg-CSS3-transitions {
    -webkit-transition: width 1s;
            transition: width 1s;
}

試試看完成的CSS3 transitions的效果

滑鼠滑上來看看
使用CSS3 transitions漸變效果
滑鼠滑上來看看
沒有CSS3 transitions漸變效果

CSS3 ANIMATIONS

CSS3 transitions幫我們實現了從A到B的漸變效果;CSS animation則是進一步讓我們控制漸變效果的時間、週期、和關鍵的時間點,從而達成A到B到C、再回到A這種不斷循環執行的動畫效果。

CSS animation的屬性
屬性 說明
@keyframes 定義在一個動畫週期間的”關鍵的時間點”(觀念類似flash中的關鍵影格)。
以百分比來表示時間:0%是動畫的開始,而100%則是動畫的結束。在動畫執行基間、可以任意添加”關鍵的時間點”
animation 所有動畫屬性的簡寫屬性,( animation-play-state 除外)。
transition: property duration timing-function delay;
animation-name 定義 @keyframes 動畫的名稱。
animation-duration 定義動畫完成一個周期的時間,預設是0。
animation-timing-function 定義動畫的速度曲線。預設是 “ease”。
animation-delay 定義動畫開始的時間。預設是 0。
animation-iteration-count 定義動畫播放的次數。預設是 1。
animation-direction 定義動畫在下一個週期是否逆向動作。預設是 “normal”。
animation-play-state 定義動畫的狀態是正在運行還是暫停。預設是 “running”。
animation-fill-mode 定義對象在動畫時間之外的狀態。
支援CSS3 transitions的瀏覽器
Property IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
-webkit-animation 5+ 4+ 4+ 15+ 3.2 + 2.1+ 41+
animation 10+ 31+ 43+

就像flash動畫的關鍵影格一樣,@keyframe 包含了時間點及發生何種變化的資訊。例如有一個動畫、他的動畫週期開始時顏色為黃、動畫執行到50%時顏色為紅、動畫結束時顏色又改為黃。這是一個由黃變紅再由紅變黃、不停變化的動畫。剛提到的開始、結束、黃、紅等時間和顏色的資訊、就是@keyframe所要定義的資訊。
有了CSS3 transitions和CSS animation,就算沒有flash或javascript、也能直接在網頁中建立動畫效果哦。

實作純css的slider

掌握了基本的CSS3 transitions和CSS animation、我們就可以開始準備製作純css的slider了。接下來我們要示範如何利用CSS3 transitions和CSS animation製作一個dissolve效果(溶接效果)的圖片輪播器。

Step 1:先將圖片就定位

HTML Markup

<div class="slider_container">
	<div>
		<img src="images/image1.png" alt="pure css3 slider" />
		<span class="info">Image Description 1</span>
	</div>
	<div>
		<img src="images/image2.png" alt="pure css3 slider" />
		<span class="info">Image Description 2</span>
	</div>
	<div>
		<img src="images/image3.png" alt="pure css3 slider" />
		<span class="info">Image Description 3</span>
	</div>
	<div>
		<img src="images/image4.png" alt="pure css3 slider" />
		<span class="info">Image Description 4</span>
	</div>
	<div>
		<img src="images/image5.png" alt="pure css3 slider" />
		<span class="info">Image Description 5</span>
	</div>
</div>

CSS Style


.slider_container {
    margin: 30px auto;
    width: 400px;
    height: 280px;
    position: relative;
    border: 20px solid;    
    border-color: #fff;
    border-bottom-width: 100px;
    background-color: #f5f5f5;
    box-shadow: #666 0 0 5px;
}

.slider_container div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

Step 2:確認輪播效果的時間軸

先決定過場時間(前後兩張圖片重疊的時間)、每張圖片播放的時間、完成一個週期需要多少時間。

pure css3 slider

由上圖我們知道我們的輪播器共有5張圖片,過場時間為1秒、每張圖片播放4秒、一個完整的週期是25秒。因為@keyframe的時間是以百分比來表示,因為我們要先把秒換成百分比。
100% / 25秒 = 4% ( 每秒)
4% = 1秒

CSS3 Keyframes Animation

設定動畫週期。


.slider_container div {
    -webkit-animation: round 25s linear infinite;
            animation: round 25s linear infinite;
}

@-webkit-keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

每張圖片進場時間相隔5秒


.slider_container div:nth-child(5) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.slider_container div:nth-child(4) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

.slider_container div:nth-child(2) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

.slider_container div:nth-child(1) {
    -webkit-animation-delay: 20s;
            animation-delay: 20s;
}

CSS transition

當滑鼠移到圖片上時、底下出現 “Image Description” 字樣且輪播動畫暫停。當滑鼠離開時、”Image Description” 字樣且輪播動畫繼續播放。


.slider_container span {    
    color: #000;
    background: #fff;
    position: absolute;
    left: 0%;
    top: 280px;
    width: 400px;
    height: 100px;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    -webkit-transform:scaleY(0);
        -ms-transform:scaleY(0);
            transform:scaleY(0);
    -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}

.slider_container:hover span {
    width: 100%;
    -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
            transform:scaleY(1);
}

Pause And Restart
當滑鼠移到圖片上時,暫停播放動畫。


.slider_container:hover div {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

完成的實例:

pure css slider
Image Description 1
pure css slider
Image Description 2
pure css slider
Image Description 3
pure css slider
Image Description 4
pure css slider
Image Description 5

這是一個很簡單的輪播動畫、如果你需要新增或減少圖片的話,別忘了讓每張圖片進場的時間相隔5秒,一個動畫週期的時間也要重新定義。記得要重新計算1秒等於多少百分比。

另外、在實際的應用上仍需要考慮瀏覽器的支援性。這一個播放器是我之前在做一個手機網頁時寫的,當時的版本比較簡單、只有無限循環播放而已。因為是手機網頁、所以只需考慮行動裝置的瀏覽器。對行動裝置來說、這個輕巧的圖片輪播器,執行起來挺順暢的!

2019/5月 更新

為純CSS的輪播動畫加上響應式效果:

如果想要為之前做的輪播動畫添加上響應式的效果,最便捷的方式就是借用一下bootstrap 的 Responsive embed 的概念。
在輪播動畫的外面包一層容器,先定義好容器的長寬比例,再將輪播動畫的長寬各設為100%。其中padding-bottom的百分比為高度除以寬度。假設容器的寬度與高度的比例為16:9,那padding-bottom就要設為56.25% ( 9除以16)。

Bootstrap 的作法:


//外層的響應式容器
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}
//被嵌入的內容
.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
我們的輪播動畫在圖片底下又多了一個高度為100px的文字區塊,所以padding-bottom 應該是高度除以寬度的比例再加上100px。可以用CSS calc 來表示。另外原本20px的邊框在計算上有點麻煩,所以我們在容器的外圍再加一層容器,用來定義邊框以及陰影。

增加的CSS

.rwd_slider_container_wrapper {
  width: 440px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: #666 0 0 5px;
  padding: 20px;
  margin: 0 auto;
}
.rwd_slider_container {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  box-sizing: border-box;
  padding-bottom: calc(70% + 100px);
}
.rwd_slider_container .slider_container {
  box-shadow: none;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
}
.rwd_slider_container .slider_container div {
  width: 100%;
  line-height: 0;
}
.rwd_slider_container .slider_container span {
  top: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

HTML的修正如下:

<div class="rwd_slider_container_wrapper">
    <div class="rwd_slider_container">    
        <div class="slider_container">
            .........
        </div><!-- end of .slider_container -->
    </div><!-- end of .rwd_slider_container -->
</div><!-- rwd_slider_container_wrapper-->

將轉場效果變為左右滑動

左右滑動與淡入淡出最大的不同點在於:圖片滑出之後還必須回到起始的位置,為下次的滑入作準備。
淡入淡出的動作:
圖片淡入 -> 圖片靜止 -> 圖片淡出
左右滑動的動作:
圖片滑入 -> 圖片靜止 -> 圖片滑出 -> 圖片回到起始位置
CSS調整為:
@-webkit-keyframes round {
  4% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 0 - 1秒 滑入*/
  }
  20% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 1- 5秒靜止*/
  }
  24% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: -100%;
    /* 5-6秒滑出*/
  }
  26% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: -100%;
    /* 6-6.5秒變透明*/
  }
  28% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 6.5-7秒回到起始位置*/
  }
}
另外,因為一開始圖片的位置在容器的外面,所以在網頁剛開始載入的時候,輪播器的內容會是一片空白,為了避免這種情況,我們可以幫輪播器加上背景。若是希望這個背景可以有滑出的效果,那麼我們就要利 ::before 這個偽元素來製作會滑動的背景。
.slider_container:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  filter: alpha(opacity=100);
  width: 100%;
  height: 100%;
  background-image: url(bk-image.jpg);
  animation: bk 25s linear;
}
@keyframes bk {
  0% {
    left: 0;
    /* 初始位置*/
  }
  4% {
    left: -100%;
    /* 0 - 1秒 滑出*/
  }   
}
@keyframes bk {
  0% {
    left: 0;
    /* 初始位置*/
  }
  4% {
    left: -100%;
    /* 0 - 1秒 滑出*/
  }  
}

62 Comments

  • 回覆 jack su |

    你好 不好意思 想請問一下 這個輪播 可以用在背景裡嗎?! 要怎麼樣把這程式碼寫在css 裡呢 希望你能撥空回答 感謝你

    • 回覆 Ellen |

      作背景輪播最快的方式就是把做好的圖片輪播以z-index的方式向下拉。
      假設我要做一個滿版的背景輪播
      那就幫slider_container再加上底下的屬性就可以了

          
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: -1;
      
    • 回覆 Samson |

      不是放下一層的意思,是layer 排序的第負一層,就像一座大廈,
      z-index: 0; 是地面,是預設
      1以上是向天發展
      -1以下是向地底發展

      而user就是鳥瞰的,就像一隻鳥在天上望下來,假設你有99層,就先看到99層的東西,如果頭重腳輕的話,就只能望到第99層的東西;反之,99層是很少/有alpha channel,就可以看到更下層的東西。
      只要用簡單的3D原理想,再用2D形式來表達。

  • 回覆 小吳 |

    您好,覺得您的文章很棒,也使用了這個效果,請問可以將內容備份到自己的網站嗎?
    相當感謝!

  • 回覆 小吳 |

    Ellen大大您好,我在套用您的圖片至部落格時想將圖片弄成滿版。
    但無論是您上面提供的方法或是用100%,又或者是vw、vh,滿版圖片都會遮住文章區塊,不知如何是好?
    我的圖片輪播是放在header區塊的下面。
    請問有什麼好辦法可以解決這樣的問題嗎?

  • 回覆 Poi145 |

    ><不好意思 想請問一下 我想製作slide但是所有圖片都沒有乖乖在框框裡面 而是散路在介面
    想請問我哪裡出問題

  • 回覆 chopin |

    您好,我在圖片位置輸入網址連結,圖片一直無法顯示出來,請問是甚麼原因,謝謝。

    • 回覆 Ellen |

      您好、之前範例有點問題,我重新整理過來、您再試試。另外這個範例不支援連結哦。

  • 回覆 小怡 |

    您好 你的圖片輪播做得很好 可是我不知道為什麼用不上 divimg和divspan 圖片輪播的時候總是顯示第一張閃過 其他圖片輪播不了 請問是哪一個步驟做錯了嗎?希望你能回答 謝謝你

  • 回覆 WC |

    請問您如何在滑鼠移到圖片上時,除了暫停播放動畫,當按下圖片時,可以連到另一個網頁?

    • 回覆 Ellen |

      這個範例目前做不到連結的效果,因為所有的圖片實際上一直重疊在一起、只是暫時隱藏而已,所以只有最後一張圖片的連結能被點擊到。改天我再把加上連結效果的範例丟上來。

    • 回覆 Ellen |

      不好意思、我不太理解,您說的字體是指”Image Description”嗎?壓在圖片的下底層是指”文字要被圖片蓋掉”??

  • 回覆 jesselo |

    我想請問一下
    hover後顯示的description時間會和pause連動嗎?
    有時候我hover一下子 移開後下一張要過特別久才會顯現
    而且有時候hover顯示的description不是該張的(例如顯示第二張圖時hover,description變成第五張的,移開後還是第二張圖)

  • 回覆 Luis Liu |

    Ellen 大您好,
    想請問一下,我是否可以在 Outlook 2010 下面,看到這樣的圖片動態輪播效果?
    我之前測試過 Java & GIF 都無法顯示。(不確定是否公司MIS鎖定或是 Outlook 不支援)

  • 回覆 Mm |

    請問,如果圖片不要過場時間,
    快速地換圖片
    以一張0.03秒的速度播放
    Keyframes要如何設定呢?

    • 回覆 Ellen |

      你說的是gif動畫的感覺嗎?那完全是另外一種概念囉,這個範列不適合

  • 回覆 Leo Liu |

    唔好意思呀!我想問一問CSS部份是Copy所有Code於一個css的檔案就可以了?還是分開幾個檔案啦?

  • 回覆 Bibi |

    Ellen 大您好,
    我使用了您的範例做背景圖輪播,但在mac Safari發生一個bug:點選綠色視窗縮放的按鈕後,輪播會停止(圖片都消失),過了一會才又開始輪播,然後輪播一輪回後又會空白一陣子再繼續播,請問您在safari有遇到這個問題嗎?

  • 回覆 JK |

    請問如果我只要4張照片罷了,要改什麼?
    我試過slider_container那邊只放4張照片,但是他還是5張照片輪播

    • 回覆 Ellen |

      從第二個步驟(確認輪播效果的時間軸)開始就要重新計算了哦。四張圖片的一個週期(100%)應該是20秒,所以1秒=5%。以此類推,所有的數字都要重新計算過。

  • 回覆 Ashley |

    您好 想詢問做好的輪播,結果它會隨著網頁卷軸拉上拉下跟著跑動,請問有甚麼解決辦法?

  • 回覆 Ashley |

    想請問一下,按照您的走向是不會有任何問題,是置中狀況呈現,想詢問如果想讓它在水平靠左要如何更改? 謝謝

  • 回覆 a007son |

    Ellen大你好,
    我參考本文寫了一個圖片推入效果的CSS動畫
    用瀏覽器預覽結果,動畫正常播放但總是最後一張圖片顯示在最上層
    如果加入animation-fill-mode屬性
    不論是backwards或both,只有第一回播放會是正確的
    能不能麻煩你指導一下我哪裡寫錯了

    CSS原始碼 https://pastebin.com/pkuw2utX
    HTML原始碼 https://pastebin.com/1cJRyMmW

  • 回覆 咪比 |

    你好
    最近剛學做網頁
    現在用GOOGLE的平台做得很有心得
    現在想要做圖片輪播
    但是一直無法實現理想

    看了你的文章 儘管我在複製貼上修修改改都無法達到您的輪播效果
    想請您是否可以教學一下

    以下是GOOGLE協作平台的嵌入訊息
    “在協作平台上新增 HTML、CSS 或 JavaScript 程式碼
    1. 使用電腦在新版 Google 協作平台中開啟協作平台。
    2. 依序按一下右側的 [插入] 然後 [嵌入]。
    3. 按一下 [嵌入程式碼]。
    4. 新增程式碼,然後點選 [下一步]。
    JavaScript 程式碼必須放在 標記內。
    CSS 程式碼必須放在 標記內。”

    第四點我也照做了 但就是不行…
    或許我的問題很淺….. 但真心想學習 …. 如能有答案 我萬分感激(跪)

    • 回覆 Ellen |

      我沒有在用google協作平台哦,有網頁嗎?可以幫你看一下,找一下原因。

  • 回覆 Mibee |

    你好 我已完成你教導的輪播了 真是萬分感激 從不會到會 非常感動
    現在有個問題想請教
    請問 做好的輪播圖片 可以把它弄成響應式的嗎? 盼回復 ~非常感謝 ~~>///<

  • 回覆 TINA |

    您好,這個程式有辦法改成動態輪播圖片嗎?
    我要輪播前才指定圖片所在的資料夾,資料夾中的圖片檔都要一一輪播,有辦法改嗎?

    • 回覆 Ellen |

      您說的要靠js才有辦法做到,這個範例是純CSS的輪播,必須要先確認有幾組圖片,算好時間和動作才行。

  • 回覆 Cherish |

    Ellen你好,謝謝您上方的教學,照著學習已經成功了^口^
    另外想要請教大大以下問題:
    1.因目前此語法是轉場是”淡出”的效果,請問這部分有辦法寫出其他效果嗎?(例如左右滑動之類的?)
    2.雖然會自動輪播,但沒有左右箭頭可以手動切換,請問這個部分該如何另外寫左右箭頭的語法呢?(或是寫在下方變成輪播的點點,點擊可以手動切圖)

  • 回覆 Daniel |

    您好請問我在每張圖片上加上超連結,但圖片輪播時,超連結永遠只是最後一個連結,不知該如何修改?? 感謝!!

  • 回覆 Adam |

    您好 請問這個功能是否在IE當中會無法正常顯示呢
    我在其他瀏覽器都使用正常 只有IE會出現第一張圖之後無法顯示的問題

    感謝您

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *