CSS進階之純CSS幻燈片
昨天寫的博文有人點了贊，讓我激動不已，晚飯賞自己一個雞腿，
。如果我的博文對您有幫助的話，就請您點個贊，您的鼓勵是我前進的動力
。如果發現文中有錯誤的地方，也煩請各位大牛指出
。以下開始正文。
首先用HTML搭建出基本的框架，如下：
<div id="container"> <div class="slide"> <!--將需要展示的圖片放在一個ul裏面--> <ul> <li class="first animation"> <img src="img/014.jpg" alt="天堂和地獄"> <div class="tooltips"><p>天堂和地獄</p></div> </li> <li class="second animation"> <img src="img/015.jpg" alt="雪山"> <div class="tooltips"><p>雪山</p></div> </li> <li class="third animation"> <img src="img/016.jpg" alt="山谷"> <div class="tooltips"><p>山谷</p></div> </li> <li class="fourth animation"> <img src="img/017.jpg" alt="花朵"> <div class="tooltips"><p>花朵</p></div> </li> <li class="fifth animation"> <img src="img/018.jpg" alt="藍天白雲"> <div class="tooltips"><p>藍天白雲</p></div> </li> </ul> <!--這個是一個進度條--> <div class="progressBar"></div> </div> </div>
然後使用CSS給它加上基本的樣式，讓它看起來沒有那麼亂。
*{
margin: 0;
padding: 0;
}
body{
min-width: 900px;
}
#container{
width: 830px;
margin: 50px auto;
}
.slide{
border: 15px solid #ccc;
border-radius: 5px;
width: 800px;
height: 450px;
overflow: hidden;
position: relative;
}
.slide ul{
position: relative;
}
.slide ul li{
list-style: none;
position: absolute;
left: -800px;
}
.slide ul li img{
width: 800px;
height: 450px;
}
.tooltips{
background: rgba(0,0,0,0);
width: 300px;
height: 60px;
position: relative;
top: -80px;
left: -300px;
/*-webkit-transition: all 0.3s ease-in-out;*/
/*-moz-transition: all 0.3s ease-in-out;*/
/*-ms-transition: all 0.3s ease-in-out;*/
/*-o-transition: all 0.3s ease-in-out;*/
/*transition: all 0.3s ease-in-out;*/
}
.tooltips p{
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
.slide .animation:hover .tooltips{
left:0;
background: rgba(0,0,0,0.7);
}
.progressBar{
position: absolute;
width: 800px;
bottom: 0px;
height: 5px;
background: #000;
z-index: 1;
/*animation: progress 25s linear infinite;*/
/*-moz-animation: progress 25s linear infinite;*/
/*-webkit-animation: progress 25s linear infinite;*/
}加完樣式之後瞬間感覺清爽多了。接下來就是最關鍵的部分，使用CSS動畫使圖片動起來達到輪播的效果。（下圖是本文實現的效果，圖像有點不清晰，主要功能爲五張圖片依次輪播，鼠標劃過停止動畫以及出現提示文字和下方進度條）
在蒐羅了一大堆前輩的代碼之後，明白了輪播的基本原理。
在一個播放週期內（文中用的是25s），讓五張輪播圖片依次出現在窗口內，通過更改圖片的 opacity 和 z-index來實現。想要實現圖片從左劃到右邊的動畫，我們只需更改圖片的 left屬性即可。
我用一張時間表大概描述一下實現的原理。
以第一張圖片爲例，其CSS動畫如下：
/*定義動畫*/
.slide li.first{
animation: cycle01 25s linear infinite;
-moz-animation: cycle01 25s linear infinite;
-webkit-animation: cycle01 25s linear infinite;
}
/*如表上一樣定義關鍵幀*/
@keyframes cycle01 {
0%{left: 0;opacity: 1;z-index: 0;}
10%{left:0;opacity: 1;z-index: 0;}
20%{left: 800px;opacity: 0;z-index: 0;}
21%{
left: -800px;
opacity:0;
z-index: -1;
}
90%{
left: -800px;
opacity: 0;
z-index: -1;
}
100%{
left:0px;
opacity: 1;
z-index: 0;
}
}然後依次定義後面的四張。到此，CSS幻燈片的基本功能已經實現。接下來爲其添加鼠標停留，動畫停止和下方進度條的功能。
.slide:hover li,.slide:hover .progressBar{ /*鼠標經過的時候停止動畫*/
animation-play-state: paused;
}
/*進度條出現的原理跟上面圖片出現的原理一樣*/
.progressBar{
position: absolute;
width: 800px;
bottom: 0px;
height: 5px;
background: #000;
z-index: 1;
animation: progress 25s linear infinite;
-moz-animation: progress 25s linear infinite;
-webkit-animation: progress 25s linear infinite;
}
@keyframes progress { /*定義關鍵幀*/
0%,20%,40%,60%,80%{
width:0;
opacity: 0;
}
5%,25%,45%,65%,85%{
width: 50%;
opacity: 0.7;
}
10%,30%,50%,70%,90%{
width: 100%;
opacity: 0.3;
}
11%,31%,51%,71%,91%{
width: 0;
opacity: 0;
}
}完整源代碼和圖片在下方的附件中。未處理兼容問題，所以請使用最新版本的瀏覽器。