純CSS3實現輪播圖

前言

　　純css3實現的輪播圖效果，和JavaScript控制的相比，簡單高效了不少，可是功能也更加單一，只有輪播不能手動切換。

　　用什麼實現的呢？頁面佈局 + animation動畫

HTML部分

<div class="container">
    <div class="title-container">
      <h1>純CSS3輪播圖</h1>
    </div>
    <div class="slide-box">
      <ul>
        <li class="slide-item slide1">
          <a href="#">
          <img src="images/img-1.jpg" alt="">
          <div class="tooltip">
            生活
          </div>
          </a>
        </li>
        <li class="slide-item slide2">
          <a href="#">
          <img src="images/img-2.jpg" alt="">
          <div class="tooltip">
            熱情
          </div>
          </a>
        </li>
        <li class="slide-item slide3">
          <a href="#">
          <img src="images/img-3.jpg" alt="">
          <div class="tooltip">
            樂觀
          </div>
          </a>
        </li>
        <li class="slide-item slide4">
          <a href="#">
          <img src="images/img-4.jpg" alt="">
          <div class="tooltip">
            美好
          </div>
          </a>
        </li>
        <li class="slide-item slide5">
          <a href="#">
          <img src="images/img-5.jpg" alt="">
          <div class="tooltip">
            意義
          </div>
          </a>
        </li>
      </ul>
      <div class="progress">

      </div>
    </div>
  </div>
</body>

View Code

　　html部分也仍是那些東西，容器+多張輪播圖子項

佈局部分

/*reset*/
html,body,div,ul,li,img,h1,a{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}


/*slide style*/

html,body{
  width: 100%;
  height: 100%;
}

body{
  background: url('./../images/bg.png') repeat;
}

.container{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}

.container .title-container{
  width: 800px;
  height: 100px;
  line-height: 100px;
  margin: 20px auto;
  text-align: center;
}

.slide-box{
  position: relative;
  width: 800px;
  height: 533px;
  margin: 0 auto;
  border:5px solid #eaeaea;
    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
            box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}

.slide-box ul{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-box ul li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.slide-box ul li .tooltip{
  position: absolute;
  left: 50px;
  top: -40px;
  height: 40px;
  width: 100px;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  line-height: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.slide-box ul li:hover .tooltip{
  top: 2px;
  z-index: 2;
}

View Code

　一、容器溢出隱藏

　二、輪播子項絕對定位

輪播動畫部分

　這部分纔是本文的重點。

　用純css3實現輪播，確定要無限循環使用animation動畫，並且須要單獨控制每一個子項的動畫效果，而其總體效果是完美的輪播效果。

　子項使用的是絕對定位，需實現的輪播效果是從左至右，因此能夠控制left的值達到展現和隱藏（定位到容器以外即隱藏）及滑動效果。先實現第一個子項

.slide-box ul li.slide1{
  -webkit-animation: slide1 25s linear infinite; 
          animation: slide1 25s linear infinite;
}

@-webkit-keyframes slide1 {
  0%  {
    left: 0;
    opacity: 1;
  }
  16%  {
    left: 0;
    opacity: 1;
  }
  20%  {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  95% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  96% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  100% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
}

　　設計輪播週期爲25s，因此每一個子項有5s的展現和移動時間。子項一的動畫效果：0-4s展現，4-5s向右方滑動至容器外隱藏，以後迅速滑倒容器左邊外隱藏（此時修改了z-index，因此不會影響到正在展現的子項），剩下的時間就是在左邊等待下次滑動及展現了。第二個子項的動畫效果需與第一個子項契合，特別在時間上，這樣總體的效果纔會好。以下：

.slide-box ul li.slide2{
  -webkit-animation: slide2 25s linear infinite;
          animation: slide2 25s linear infinite;
}

@-webkit-keyframes slide2 {
  0%  {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  16%  {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  20%  {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  36% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  40% {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
}

　　第二個子項 1-4s在容器左邊外等待，4-5s向右滑出展現（此時第一個子項向左滑出隱藏），5-9s展現 9-10s向左滑出隱藏。

　　同理剩下的子項，依次順延調整好動畫，總體的效果就會很是流暢。

進度條動畫

　　因展現時間較長4s，因此能夠加入進度條，交互體驗會更加好。HTML中的div.progress便是進度條的結構。樣式以下：

.slide-box .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 0;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation: progress 5s linear infinite;
          animation: progress 5s linear infinite;
  z-index: 2;
}

@-webkit-keyframes progress {
  0%{
    width: 0;
  }
  80%{
    width: 100%;
  }
  81%{
    width: 0;
  }
  100%{
    width: 0;
  }
}

　　經過控制寬度來標識進度。

hover 暫停動畫

　　若須要鼠標懸停時暫停動畫，使用 animation-play-state: paused 控制便可

.slide-box:hover ul li,
.slide-box:hover .progress
{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

 

結語

　　雖然功能簡單，可是純css3實現的效率仍是很高的，效果也不錯---------見 demo