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