前言

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

　　用什么實現(xiàn)的呢？頁面布局 + 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

　1、容器溢出隱藏

　2、輪播子項絕對定位

輪播動畫部分

　這部分才是本文的重點(diǎn)。

　用純css3實現(xiàn)輪播，肯定要無限循環(huán)使用animation動畫，而且需要單獨(dú)控制每個子項的動畫效果，而其整體效果是完美的輪播效果。

　子項使用的是絕對定位，需實現(xiàn)的輪播效果是從左至右，所以可以控制left的值達(dá)到展示和隱藏（定位到容器之外即隱藏）及滑動效果。先實現(xiàn)第一個子項

.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;} }

　　設(shè)計輪播周期為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向左滑出隱藏。

　　同理剩下的子項，依次順延調(diào)整好動畫，整體的效果就會非常流暢。

進(jìn)度條動畫

　　因展示時間較長4s，所以可以加入進(jìn)度條，交互體驗會更加好。HTML中的div.progress即是進(jìn)度條的結(jié)構(gòu)。樣式如下：

.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;} }

　　通過控制寬度來標(biāo)識進(jìn)度。

hover 暫停動畫

　　若需要鼠標(biāo)懸停時暫停動畫，使用?animation-play-state: paused 控制即可

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

?

結(jié)語

　　雖然功能簡單，但是純css3實現(xiàn)的效率還是很高的，效果也不錯---------見 demo

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/shapeY/p/7659409.html

總結(jié)

以上是生活随笔為你收集整理的纯CSS3实现轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。