css3实现无缝滚动的轮播图

最新推荐文章于 2024-09-06 23:20:39 发布

rufeike

最新推荐文章于 2024-09-06 23:20:39 发布

阅读量4.2k

点赞数 2

分类专栏：前端小案例文章标签： css3 动画 animation

本文链接：https://blog.csdn.net/rufeike/article/details/102691580

版权

前端小案例专栏收录该内容

9 篇文章 2 订阅

订阅专栏

css3实现无缝滚动的轮播图

效果图

在这里插入图片描述

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 lang="en">
<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 class="window">
    <div class="images_list">
        <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>