某些狀況之下，需要在網頁上做區塊輪播的效果，以達到一個畫面可以顯示更多資訊的目的，舉例來說：要顯示的資料過多、一次顯示在畫面上會很雜亂。當然除此之外，還能用做圖片的幻燈片效果，重點是從頭到尾都不用碰到 JavaScript！純 CSS 搭配 HTML 就能做到囉！現在我就用一組簡易的示範來簡單描述原始碼：
HTML
這裡先用一個 <div class="slider-container"> 作為輪播區塊外的父容器，裏頭先放兩個輪播區塊。
<div class="slider-container">
<div>
輪播區塊一：<br>
111111111111111111111111111111111111111<br>
111111111111111111111111111111111111111<br>
111111111111111111111111111111111111111<br>
</div>
<div>
輪播區塊二：<br>
222222222222222222222222222222222222222<br>
222222222222222222222222222222222222222<br>
222222222222222222222222222222222222222<br>
</div>
</div>CSS
這邊先為父容器建立樣式，下方子容器用相鄰關係之絕對定位（position: absolute;）設為左上 0 來重疊它們，再用 CSS 動畫來指定區塊的透明度，以達到輪播的效果。動畫總週期設為 20 秒，共有兩區塊要輪播，因此每個區塊給 1 秒淡入、9 秒靜止、1 秒淡出，一個區塊最後的一秒淡出會接著下一個區塊的一秒淡入，這樣就有兩區塊淡出淡入切換的視覺感受了！詳細可參考我在原始碼上頭留的註解。
.slider-container {
margin: 20px;
width: 400px;
height: 100px;
position: relative;
border: 10px solid #fff;
box-shadow: #666 0 0 10px;
}
.slider-container div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
/* 區塊輪播動畫週期 */
.slider-container div {
-webkit-animation: cycle 20s ease infinite;
animation: cycle 20s ease infinite;
}
/* 100% 切成 20 秒，5% = 1 秒 */
@-webkit-keyframes cycle {
5% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 ~ 1 秒淡入*/
}
50% {
opacity: 1;
filter: alpha(opacity=100);
/* 1 ~ 10 秒靜止*/
}
55% {
opacity: 0;
filter: alpha(opacity=0);
/* 10 ~ 11 秒淡出*/
}
}
@keyframes cycle {
5% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 ~ 1 秒淡入*/
}
50% {
opacity: 1;
filter: alpha(opacity=100);
/* 1 ~ 10 秒靜止*/
}
55% {
opacity: 0;
filter: alpha(opacity=0);
/* 10 ~ 11 秒淡出*/
}
}
/* 設定每個區塊進場時間 */
.slider-container div:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.slider-container div:nth-child(2) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}CodePen
See the Pen
純CSS區塊輪播效果 by Feng, Cheng-Chi (@qwe987299)
on CodePen.
▲ 精選圖片。
贊助廣告 ‧ Sponsor advertisements
《上一篇》Node-RED：開啟專案(項目)功能與建立首個新專案 
《下一篇》Node-RED：將資料寫入至 MSSQL 資料庫中的資料表 
留言區 / Comments
萌芽論壇