css实现无缝轮播

最新推荐文章于 2024-07-16 14:17:50 发布

weixin_30919571

最新推荐文章于 2024-07-16 14:17:50 发布

阅读量126

点赞数

原文链接：http://www.cnblogs.com/gxywb/p/10319982.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            @keyframes move{
                0%{
                    transform: translateX(0px);
                }
                20%{
                    transform: translateX(0px);
                }
                25%{
                    transform: translateX(-200px);
                }
                45%{
                    transform: translateX(-200px);
                }
                50%{
                    transform: translateX(-400px);
                }
                70%{
                    transform: translateX(-400px);
                }
                75%{
                    transform: translateX(-600px);
                }
                100%{
                    transform: translateX(-600px);
                }
            }
            .wrap{
                width: 200px;
                height: 134px;
                border: 5px solid #f00;
                overflow: hidden;
            }
            img{
                width: 200px;
                height: 134px;
                vertical-align: top;
                border: none;
            }
            ul{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .list{
                width: 400%;
                animation: move 5s infinite linear;
            }
            .list li{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul class="list">
                <li><img src="img/banner1.png" /></li>
                <li><img src="img/banner2.png" /></li>
                <li><img src="img/banner3.png" /></li>
                <li><img src="img/banner1.png" /></li>
            </ul>
        </div>
    </body>
</html>