超简单!⼀个标签搞定跑马灯，纯css制作跑马灯效果
在平时我们做跑马灯，⼀般是⽤gif图，或者是⽤DOM元素来制作，但是gif体积⽐较⼤，⽽且不太灵活，调整⼤⼩，速度，颜⾊，都需要重新切图，⽤DOM元素来实现，会让页⾯出现很多DOM不太友好，今天介绍⼀个⽤纯css制作的跑马灯效果。主要原理是利⽤css 属性 box-shadow 可以⽆限复制的特点来做周围的灯，通过css3 transition 属性让灯跑起来，话不多说，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>跑马灯</title>
</head>
<body>
<div class="content"></div>
<style>
.content{
margin: 100px auto;
width: 500px;
height: 300px;
background: #08ca6a;
border-radius: 24px;
position: relative;
}
.content::before{
position: absolute;
content:"";
display: block;
top: -30px;
left: -30px;
height: 20px;
width: 20px;
border-radius: 50%;
animation: light 0.5s infinite;
}
@-webkit-keyframes light{
/* Safari and Chrome */
from{
background-color: #ff5722;
box-shadow: 50px 0 0 0 #ff0, 100px 0 0 0 #ff5722, 150px 0 0 0 #ff0, 200px 0 0 0 #ff5722, 250px 0 0 0 #ff0, 300px 0 0 0 #ff5722, 350px 0 0 0 #ff 0, 400px 0 0 0 #ff5722, 450px 0 0 0 #ff0, 500px 0 0 0 #ff5722, 550px 0 0 0 #ff0, 550px 50px 0 0 #ff5722, 550px 100px 0 0 #ff0, 550px 150px 0 0 #ff5722, 550px 200px 0 0 #ff0, 550px 250px 0 0 #ff5722, 550px 300px 0 0 #ff0, 550px 350px 0 0 #ff5722, 500px 350px 0 0 #ff0, 450px 350px 0 0 #ff5722, 400px 3 50px 0 0 #ff0, 350px 350px 0 0 #ff5722, 300px 350px 0 0 #ff0, 250px 350px 0 0 #ff5722, 200px 350px 0 0 #ff0, 150px 350px 0 0 #ff5722, 100px 350px 0 0 #ff0, 50px 350px 0 0 #ff5722, 0px 350px 0 0 #ff0, 0 0 0 0 #ff5722, 0 50px 0 0 #ff0, 0 100px 0 0 #ff5722, 0 150px 0 0 #ff0, 0 200px 0 0 #ff5722, 0 250px 0 0 #ff0, 0 300px 0 0 #ff5722, 0 350px 0 0 #ff0;
}
to{
background-color: #ff0;
box-shadow: 50px 0 0 0 #ff5722, 100px 0 0 0 #ff0, 150px 0 0 0 #ff5722, 200px 0 0 0 #ff0, 250px 0 0 0 #ff5722, 300px 0 0 0 #ff0, 350px 0 0 0 #ff 5722, 400px 0 0 0 #ff0, 450px 0 0 0 #ff5722, 500px 0 0 0 #ff0, 550px 0 0 0 #ff5722, 550px 50px 0 0 #ff0, 550px 100px 0 0 #ff5722, 550px 150px 0 0 #ff0, 550px 200px 0 0 #ff5722, 550px 250px 0 0 #ff0, 550px 300px 0 0 #ff5722, 550px 350px 0 0 #ff0, 500px 350px 0 0 #ff5722, 450px 350px 0 0 #ff0, 400px 3 50px 0 0 #ff5722, 350px 350px 0 0 #ff0, 300px 350px 0 0 #ff5722, 250px 350px 0 0 #ff0, 200px 350px 0 0 #ff5722, 150px 350px 0 0 #ff0, 100px 350px 0 0 #ff5722, 50px 350px 0 0 #ff0, 0px 350px 0 0 #ff5722, 0 0 0 0 #ff0, 0 50px 0 0 #ff5722, 0 100px 0 0 #ff0, 0 150px 0 0 #ff5722, 0 200px 0 0 #ff0, 0 250px 0 0 #ff5722, 0 300px 0 0 #ff0, 0 350px 0 0 #ff5722;
}
}
</style>
</body>
</html>
html ⾥就⼀个div,css ⾥需要⼿动算⼀下每个灯的位置，如果觉得太⿇烦，可以利⽤less，或者scss 循环遍历简化书⽅式，然后把两种颜⾊设置成变量，⽅便修改下⾯看效果~
cssclass属性
是不是很超简单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。