純css3實現的輪播圖效果，和JavaScript控制的相比，簡單高效了很多，但是功能也更加單一，只有輪播不能手動切換。
用什麼實現的呢？頁面佈局+ animation動畫
<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;
}}透過控制寬度來標識進度。
若需要滑鼠懸停時暫停動畫，使用 animation-play-state: paused 控制即可
.slide-box:hover ul li,
.slide-box:hover .progress{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}以上是純CSS3實作輪播圖的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
