CSS 线条流星动画

<div class="control-xian line-left"></div>

.line-left::before {
    
    
  content: "";
  position: absolute;
  height: 1px;
  width: 10px;
  background: linear-gradient(to left, transparent, #fff);
  animation: fade-left 3s linear infinite;
  box-shadow: 0px 0px 17px 5px #72dffa;
}
.control-xian {
    
    
      width: 149px;
      position: relative;
      height: 1px;
      border: 2px solid;
      border-image: linear-gradient(
          136deg,
          rgba(107, 191, 252, 1),
          rgba(0, 213, 227, 1)
        )
        2 2;
 }
@keyframes fade-left {
    
    
  0% {
    
    
    right: 0px;
    opacity: 0;
  }
  10% {
    
    
    opacity: 1;
  }
  90% {
    
    
    opacity: 1;
  }
  100% {
    
    
    right: calc(100% - 10px);
    opacity: 0;
  }
}