怎样用css实现无缝轮播图切换?

怎样用css实现无缝轮播图切换?下面本篇文章给大家介绍一下使用css3实现无缝滚动轮播图的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

效果图

1.gif

css3动画知识应用

指定动画名称:animation-name: moveTest;

  • 定义动画

@keyframes moveTest {
            0% {
                transform: translate(100px);
            }
            50% {
                transform: translate(100px, 200px);
            }
            100% {
                transform: translate(200px, 400px);
            }
        }

设置动画总耗时:animation-duration: 2s;

设置动画播放次数:animation-iteration-count: infinite; 默认为1次,可以指定数字,指定infinite为无限循环

设置动画交替执行:animation-direction: alternate; 从动画开始到结束,再倒过来执行

设置动画延时时间:animation-delay: 2s;

设置动画保留状态:animation-fill-mode: forwards;

设置动画时间函数:animation-timing-function: linear;匀速、变速

设置动画的播放状态 :animation-play-state: running; paused 暂停 running 播放

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .window{
            width:1000px;
            height:138px;
            border:1px solid #eeeeee;
            margin:100px auto;
            overflow: hidden;
        }
        .images_list{
            width:2000px;
            height:138px;
            animation-name: move;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        img {
            float: left;
            width: 100px;
            height: 138px;
        }
        .images_list:hover{
            cursor:pointer;
            animation-play-state: paused;
        }

        @keyframes move{
            from{
                transform:translate(0px);
            }
            to{
                transform:translate(-1000px);
            }
        }
    </style>
</head>
<body>
<div>
    <div>
        <img src="./public/images/pk1.jpg" alt="">
        <img src="./public/images/pk2.jpg" alt="">
        <img src="./public/images/pk3.jpg" alt="">
        <img src="./public/images/pk4.jpg" alt="">
        <img src="./public/images/pk5.jpg" alt="">
        <img src="./public/images/pk6.jpg" alt="">
        <img src="./public/images/pk7.jpg" alt="">
        <img src="./public/images/pk8.jpg" alt="">
        <img src="./public/images/pk9.jpg" alt="">
        <img src="./public/images/pk10.jpg" alt="">
        <img src="./public/images/pk1.jpg" alt="">
        <img src="./public/images/pk2.jpg" alt="">
        <img src="./public/images/pk3.jpg" alt="">
        <img src="./public/images/pk4.jpg" alt="">
        <img src="./public/images/pk5.jpg" alt="">
        <img src="./public/images/pk6.jpg" alt="">
        <img src="./public/images/pk7.jpg" alt="">
        <img src="./public/images/pk8.jpg" alt="">
        <img src="./public/images/pk9.jpg" alt="">
        <img src="./public/images/pk10.jpg" alt="">
    </div>

</div>
</body>
</html>

更多css的相关知识,可访问:web前端自学!!

以上就是怎样用css实现无缝轮播图切换?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏