CSS 制作动态蚂蚁线

news2024/11/24 8:31:35

效果：

请添加图片描述

代码：

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