純css3實現無縫輪播圖效果
阿新 • • 發佈：2019-02-05
主要就是利用css3中的動畫了，看完整實現程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純css實現輪播圖效果</title> <style> @keyframes move{ 0%{ transform:translateX(0%); } 20%{ transform:translateX(0%); } 25%{ transform:translateX(-500px); } 45%{ transform:translateX(-500px); } 50%{ transform:translateX(-1000px); } 70%{ transform:translateX(-1000px); } 75%{ transform:translateX(-1500px); } 95%{ transform:translateX(-1500px); } 100%{ transform:translateX(-2000px); } } .wrap{width:500px; height:320px; position:relative; margin:50px auto; border:5px solid #f00; overflow:hidden; } ul,li{margin:0; padding:0; list-style:none;} img{vertical-align: top; border:none;} .list{width:500%; animation: move 7s linear infinite} .list li{float:left; width:500px; height:320px;} .list img{width:100%; height:100%;} </style> </head> <body> <div class="wrap"> <ul class="list"> <li><img src="imgs/ad_1.jpg" alt=""/></li> <li><img src="imgs/ad_2.jpg" alt=""/></li> <li><img src="imgs/ad_3.jpg" alt=""/></li> <li><img src="imgs/ad_4.jpg" alt=""/></li> <li><img src="imgs/ad_1.jpg" alt=""/></li> </ul> </div> </body> </html>