CSS 制作动态蚂蚁线-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS 制作动态蚂蚁线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：

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：
CSS 制作动态蚂蚁线,技术杂文,css,前端

代码文章来源地址https://www.toymoban.com/news/detail-542888.html

<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>