CSS3 animation 实现跑马灯效果

可以使用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;

        }

猜你喜欢

转载自blog.csdn.net/weixin_49054076/article/details/129918919