C3版的无缝滚动动画

最新推荐文章于 2024-05-19 21:18:03 发布

奋斗的妍

最新推荐文章于 2024-05-19 21:18:03 发布

阅读量1.9k

点赞数

本文链接：https://blog.youkuaiyun.com/wyyandyou_6/article/details/81254654

版权

本文介绍了C3版中实现无缝滚动动画的学习过程，包括自定义动画与过渡动画的区别、animation属性详解及关键帧的使用。通过理解这些知识点，演示了一个使用from和to关键字创建的关键帧动画案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习了自定义动画，做了一个小小的案例，在写案例之前需要了解以下知识点：

1.自定义动画和过渡动画的区别：

自定义动画不需要触发，过渡动画需要触发

2.过渡动画的重要属性：animation，animation 属性是一个简写属性，用于设置六个动画属性，即

animation-name：自定义动画的名称
animation-duration：动画时长
animation-timing-function：缓冲曲线
animation-delay：等待时间
animation-iteration-count：播放次数（infinite表示无数次播放）
animation-direction：规定是否应该轮流反向播放动画。

3.关键帧，在使用@keyframes 创建动画时，需要把他捆绑到某个选择器，否则不会产生动画效果，可以使用关键词 “from” 和 “to”创建关键帧，也可以使用百分比。本案例使用的是from和to关键字

代码如下：

<style>
        *{margin: 0;padding: 0}
        body{background: black}
        .donghua{
            width: 600px;
            height: 200px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .donghua ul{
            list-style: none;
            width: 1800px;
            position: absolute;
            left: 0;
            right: 0;
            animation: run 10s linear 0s infinite;
        }
        img{
            display: block;
        }
        .donghua li{
            float: left;
            cursor: pointer;
        }
        @keyframes run{
            form{
                left: 0;
            }
            to{
                left: -1200px;
            }
        }


    </style>
</head>
<body>
    <div class="donghua">
        <ul>
            <li><img src="images/53/01.jpg" alt=""></li>
            <li><img src="images/53/02.jpg" alt=""></li>
            <li><img src="images/53/03.jpg" alt=""></li>
            <li><img src="images/53/04.jpg" alt=""></li>
            <li><img src="images/53/01.jpg" alt=""></li>
            <li><img src="images/53/02.jpg" alt=""></li>
        </ul>


    </div>
</body>