CSS3 animation 实现跑马灯效果

ิっ淺

已于 2023-04-05 17:31:55 修改

阅读量575

点赞数 1

分类专栏： css 文章标签： css3 前端 css

于 2023-04-02 22:57:46 首次发布

本文链接：https://blog.csdn.net/weixin_49054076/article/details/129918919

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

可以使用CSS3的animation属性实现跑马灯效果，具体的animation相关属性可以参考w3cshool官网详细的介绍了animation属性

实现动画效果animation的步骤

第一步先使用过@keyframs定义动画

第二步调用动画，animation-name（动画名称）与animation-duration（持续时间）这两个属性是必要的

html

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

css

 /* 1、定义动画 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
                background-color: red;
            }

            100% {
                transform: translate(1000px, 0);
                background-color: blue;
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
        /*简写
         animation:名字 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态     
        */
            animation: move 2s linear 0s infinite backwards;

        }