純CSS3實現輪播圖的方法

前言

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

　　用什麼實現的呢？頁面配置 + animation動畫

HTML部分

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

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

布局部分

/*reset*/html,body,p,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;}

　1、容器溢出隱藏

　2、輪播子項絕對位置

輪播動畫部分

　這部分才是本文的重點。

　用純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中的p.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;}