CSS 制作动态蚂蚁线-编程知识

CSS 制作动态蚂蚁线

效果：

请添加图片描述

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.line{position:relative;margin-bottom: 5px;width: 1200px;height: 5px;background:linear-gradient(90deg, transparent 15px, black 0) top left;background-size: 30px;background-repeat: repeat;animation:mymove 0.5s infinite;animation-timing-function:linear;
}@keyframes mymove
{from {left:0px;}to {left:30px;}
}</style>
</head>
<body style="margin:50px"><div class="line"></div>
</body>
</html>

示例2：
请添加图片描述

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.line-content{position:relative;margin-bottom: 5px;width: 1200px;height: 5px;background:linear-gradient(90deg, transparent 15px, black 0) top left;background-size: 30px;background-repeat: repeat;animation:mymove 0.5s infinite;animation-timing-function:linear;
}.line::before {content: "";position: absolute;margin-top:-3px;height: 10px; width: 20px; border-radius: 3px;background: rgb(12, 14, 1); animation: fade-left 5s linear infinite;box-shadow: 0px 0px 17px 5px rgb(0, 250, 250); 
}@keyframes mymove
{from {left:0px;}to {left:30px;}
}@keyframes fade-left {0% {left: 0px;opacity: 0;}10% {opacity: 1;}90% {opacity: 1;}100% {left: 1200px; opacity: 0;}
}</style>
</head>
<body style="margin:50px"><div class="line"><div class="line-content"></div></div>
</body>
</html>