純 CSS 區塊輪播效果

2021/12/07 988 2 網站技術 , HTML , CSS

某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂。當然除此之外,還能用做圖片的幻燈片效果,重點是從頭到尾都不用碰到 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

留言區 / Comments

萌芽論壇