CSS做一個圖片輪播是一件非常方便實現的事情,以下是實現的詳細步驟:
<html> <head> <style> /*設置容器的大小和位置*/ .container{ width: 500px; height: 300px; margin: 0 auto; overflow: hidden; } /*設置輪播圖的容器大小和位置*/ .carousel{ width: 2000px; height: 300px; position: relative; left: 0; top: 0; animation: move 10s infinite; } /*設置輪播圖圖片的大小、位置和樣式*/ .carousel img{ width: 500px; height: 300px; float: left; } /*設置動畫*/ @keyframes move{ 0%{ left: 0; } 20%{ left: 0; } 25%{ left: -500px; } 45%{ left: -500px; } 50%{ left: -1000px; } 70%{ left: -1000px; } 75%{ left: -1500px; } 95%{ left: -1500px; } 100%{ left: 0; } } </style> </head> <body> <div class="container"> <div class="carousel"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> </div> </div> </body> </html>
上述代碼中,先設置輪播圖容器的大小和位置,再設置輪播圖的大小和位置,最后使用CSS3的動畫效果,讓輪播圖進行滑動。
以上就是使用CSS做一個圖片輪播的完整實現步驟。