這期內容當中小編將會給大家帶來有關使用CSS3怎么制作輪播圖，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
<style>
*{margin:0;padding:0;}
a{text-decoration:none}
li{list-style:none;}設計寬度不要超過輪播圖片的總寬度再加不到第一張1張圖片的寬度（加第一張1張圖片的寬度是為了輪播效果看得見）我的是1500寬度和200的高度，再設置溢出隱藏（消除移動出顯示區域還在顯示）
#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}1000%是比較懶的寫法，為了把ul的寬度設置的寬一點，看著很夸張，因為至少需要超過總圖片的寬度兩倍再加不到1張圖片的寬度為什么要兩倍呢，因為圖片是向左移動的（方向自行設置），移出去了后面沒有圖片補充就沒有輪播效果
了，1000%夠長了，就不用了去計算總圖片的寬度了，當然，圖片夠多也可以不這么設置，只要設置總寬度寬度的一半在加上不到一張圖片的寬度。輪播的動畫的名字，多少時間輪播一次
#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}設置浮動讓所有圖片一行顯示和圖片的寬度
#box ul li{float:left;width:133px;height:200px;}設置鼠標滑過暫停
#box:hover ul{animation-play-state:paused;}設置動畫的動畫名和輪播圖移動方向（動畫效果）
@keyframes animal {
0%{margin-left:0;}
100%{margin-left:-1463px;}
}
</style>下面是body部分
輪播圖一般都可以點擊訪問，所以放在a標簽內
<body> <div id="box"> <ul> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/5.jpg" /></a></li> <li><a href="#"><img src="images/6.jpg" /></a></li> <li><a href="#"><img src="images/7.jpg" /></a></li> <li><a href="#"><img src="images/8.jpg" /></a></li> <li><a href="#"><img src="images/9.jpg" /></a></li> <li><a href="#"><img src="images/10.jpg" /></a></li> <li><a href="#"><img src="images/11.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/5.jpg" /></a></li> <li><a href="#"><img src="images/6.jpg" /></a></li> <li><a href="#"><img src="images/7.jpg" /></a></li> <li><a href="#"><img src="images/8.jpg" /></a></li> <li><a href="#"><img src="images/9.jpg" /></a></li> <li><a href="#"><img src="images/10.jpg" /></a></li> <li><a href="#"><img src="images/11.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> </ul> </div> </body>
上述就是小編為大家分享的使用CSS3怎么制作輪播圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
