一条线 颜色渐变动画（流光效果）

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .ball {
    width: 170px;
    height: 2px;
    background-image: linear-gradient(90deg, #004efd, #b9dbf5, #004efd);
    background-size: 150%;
    animation: bounce 2s infinite;
  }
}

@keyframes bounce {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes bounce {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

 效果图：