超简单! 一个标签搞定跑马灯，纯css制作跑马灯效果

在平时我们做跑马灯，一般是用gif图，或者是用DOM元素来制作，但是gif体积比较大，而且不太灵活，调整大小，速度，颜色，都需要重新切图，用DOM元素来实现，会让页面出现很多DOM不太友好，今天介绍一个用纯css制作的跑马灯效果。主要原理是利用css 属性 box-shadow 可以无限复制的特点来做周围的灯，通过css3 transition 属性让灯跑起来，话不多说，上代码<!DOCTY

格竹悟道

2366人浏览 · 2021-04-04 19:03:26

格竹悟道 · 2021-04-04 19:03:26 发布

在平时我们做跑马灯，一般是用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 #ff0, 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 350px 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 #ff5722, 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 350px 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>