css3怎么實(shí)現(xiàn)輪播圖

css3怎么實(shí)現(xiàn)輪播圖？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

我們在網(wǎng)頁上經(jīng)常會看到有一塊位置會有很多的圖片來回切換，這就是輪播圖，輪播圖的出現(xiàn)，讓重要的信息可以在一個(gè)位置顯現(xiàn)，那么，輪播圖是如何實(shí)現(xiàn)的呢？輪播圖的實(shí)現(xiàn)用js或者css都可以，本篇文章就來給大家介紹css3如何來實(shí)現(xiàn)輪播圖效果。

css3實(shí)現(xiàn)輪播圖效果可以利用CSS3 animation 屬性和 @keyframes 規(guī)則。

ainimation實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成：  
1、通過類似Flash動(dòng)畫中的幀來聲明一個(gè)動(dòng)畫；  
2、在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。

animation 屬性是一個(gè)簡寫屬性

語法：animation: name duration timing-function delay iteration-count direction。

animation屬性值在這里就不多介紹了，需要的話可以參考css手冊。

那下面我們就來直接看一個(gè)例子：

html：

<div id="container">
    <div id="photo">
        <img src="https://cache.yisu.com/upload/information/20200318/93/13510.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="https://cache.yisu.com/upload/information/20200318/93/13511.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="https://cache.yisu.com/upload/information/20200318/93/13512.jpg@1280w_1l_2o_100sh.jpg" />
    </div>
</div>

css：

#container {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
#photo {
    width: 1200px;
    animation: switch 5s ease-out infinite;
}
#photo > img {
    float: left;
    width: 400px;
    height: 300px;
}
@keyframes switch {
    0%, 25% {
        margin-left: 0;
    }
    35%, 60% {
        margin-left: -400px;
    }
    70%, 100% {
        margin-left: -800px;
    }
}

說明：

展示容器大小和圖片大小一致

圖片添加 float 效果，不用考慮麻煩的 margin 問題

由于示例只有三個(gè)圖片，所以添加了三個(gè)動(dòng)畫階段，每一階段都是通過設(shè)置遞增的 margin-left 值達(dá)到切換的效果

設(shè)置的動(dòng)畫階段（如：35%~60%）是動(dòng)畫停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫切換部分，各部分時(shí)間長短需要自己把控。

感謝各位的閱讀！看完上述內(nèi)容，你們對css3怎么實(shí)現(xiàn)輪播圖大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。