<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css无缝滚动</title> <style> *{ margin: 0; padding: 0; } .scrollOut{ width: 400px; height: 100px; overflow: hidden; margin: 100px auto; border: 1px solid red; position: relative; } .scrollOut .scrollList{ width: 200%; height: 100px; position: absolute; left: 0; top: 0; animation: scrollImg 4s linear infinite; } .scrollOut .scrollList li{ float: left; list-style: none; width: 100px; height: 100px; } .scrollOut .scrollList img{ width: 100%; height: 100%; } @-webkit-keyframes scrollImg { 0%{ left: 0; } 100%{ left: -400px; } } </style> </head> <body> <div class="scrollOut"> <ul class="scrollList"> <li><img src="../images/11.jpg" alt=""/></li> <li><img src="../images/12.jpg" alt=""/></li> <li><img src="../images/13.jpg" alt=""/></li> <li><img src="../images/14.jpg" alt=""/></li> <li><img src="../images/11.jpg" alt=""/></li> <li><img src="../images/12.jpg" alt=""/></li> <li><img src="../images/13.jpg" alt=""/></li> <li><img src="../images/14.jpg" alt=""/></li> </ul> </div> </body> </html>
css3实现无缝轮播
最新推荐文章于 2024-02-24 13:12:49 发布