CSS進階之純CSS幻燈片

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

}

完整源代碼和圖片在下方的附件中。未處理兼容問題，所以請使用最新版本的瀏覽器。