<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{ margin: 0; padding: 0; text-decoration: none;}ul{ list-style: none;}ul li{ width: 400px; height:200px;}#container{ position: relative; width: 400px; height: 200px; overflow: hidden;/*隱藏溢出的圖片*/}.pic{ width:1600px;/*4張圖的寬度*/ position: absolute;/*基于父容器進(jìn)行定位*/ left:0; animation-name: carousel; animation-duration: 12s; animation-iteration-count: infinite;/*//動(dòng)畫(huà)調(diào)用可以簡(jiǎn)寫(xiě)*/}@keyframes carousel { 0%,30%{ left: 0; } 35%,65%{ left: -400px; } 70%,99%{ left: -800px; } 100%{ left: -1200px; } }.pic li{ float: left; background: #5dd94e;}.pic li img { width: 400px; height: 200px;}</style><body><p id="container"> <ul class="pic"> <li><a href="javascript:;">111</a></li> <li><a href="javascript:;">222</a></li> <li><a href="javascript:;">333</a></li> <li><a href="javascript:;">111</a></li><!-- 克隆第一張 --> </ul> </p> </body></html>
相關(guān)推薦：
css3怎么讓圖片實(shí)現(xiàn)不停旋轉(zhuǎn)的效果？【詳解】
如何利用css來(lái)設(shè)置文本的背景顏色？css設(shè)置背景顏色代碼詳解
以上就是如何使用純CSS3實(shí)現(xiàn)圖片輪播的效果的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注 其它相關(guān)文章！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
新聞熱點(diǎn)
疑難解答
