纯css3实现无缝轮播图效果

最新推荐文章于 2024-05-19 18:44:34 发布

冰雪为融

最新推荐文章于 2024-05-19 18:44:34 发布

阅读量7.3k

点赞数 9

分类专栏： css3 文章标签： css3实现无缝轮播图效果

本文链接：https://blog.csdn.net/lhjuejiang/article/details/82459403

版权

css3 专栏收录该内容

45 篇文章 3 订阅

订阅专栏

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

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

冰雪为融

关注

9
点赞
踩
42

收藏

觉得还不错? 一键收藏
2
评论
纯css3实现无缝轮播图效果

主要就是利用css3中的动画了，看完整实现代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯css实现轮播图效果&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫