纯css3实现无缝轮播图效果

迷南。 2022-05-14 10:06 309阅读 0赞

主要就是利用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>

补充：2021/05/12

注意：图片列表的第一张和最后一张是一样的，否则会出现快速闪过的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20220514/fd9818610edb4a26b76fe666ca5b3537.png