css編寫banner輪播

一。先寫兩個div,把需要輪播的圖片放進去

<div class="a">
　　<div class="b play">
　　　　<img src="img/1.jpg" alt="">
　　　　<img src="img/2.jpg" alt="">
　　　　<img src="img/3.jpg" alt="">
　　</div>
</div>

二。外層div規定一塊區域,讓圖片在這片區域顯示；內層div把需要顯示的圖片並排合成一張大圖片；主要屬性overflow，hidden值使超出范圍的內容不顯示

.a{
　　position: absolute;
　　width: 480px;
　　height: 270px;
　　background-color: pink;
　　overflow: hidden;
}
.b{
　　position: absolute;
　　width: 1440px;
　　height: 100%;
}
.b img{
　　width: 480px;
　　height: 100%;
　　float: left;
}

三。使用animation創造一個動畫，通過margin-left移動圖片。

.play{
　　animation: ma 10s 3s infinite;
}
@keyframes ma{
　　0%{
　　　　margin-left: 0px;
　　}
　　16%{
　　　　margin-left: -480px;
　　}
　　32%{
　　　　margin-left: -480px;
　　}
　　48%{
　　　　margin-left: -960px;
　　}
　　64%{
　　　　margin-left: -960px;
　　}
　　80%{　　
　　　　margin-left: 0px;
　　}
　　100%{
　　　　margin-left: 0px;
　　}
}
.play:hover{
　　animation-play-state: paused;
}