css 光效顺着线动

你可以通过使用CSS动画和线性渐变来实现光效顺着线运动的效果。首先，你可以创建一个包含线性渐变的元素，然后通过CSS动画来改变其位置，以实现光效顺着线运动的效果。

以下是一个示例代码：

<style>
  /* 创建一个带有线性渐变的元素 */
  .light-effect {
    background: linear-gradient(to right, #fff, #f00, #fff);
    width: 200px;
    height: 10px;
    position: relative;
    overflow: hidden;
  }
  
  /* 定义动画 */
  @keyframes move {
    0% {
      left: -200px;
    }
    100% {
      left: 100%;
    }
  }
  
  /* 应用动画到元素 */
  .light-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    height: 10px;
    background-color: #fff;
    animation: move 2s linear infinite; /* 设置动画的持续时间、过渡方式和循环次数 */
  }
</style>

<div class="light-effect"></div>

在上面的代码中，我们创建了一个名为`.light-effect`的元素，并为其设置了一个线性渐变背景。然后，通过使用CSS动画 `@keyframes` 和 `animation` 属性，我们将一个伪元素 `::after` 应用到`.light-effect`上，并设置其初始位置为左侧远离视图范围以外，并通过动画将其移动到右侧，在达到右侧时重新回到左侧，从而形成一个循环移动的光效。

你可以根据需要调整代码中的尺寸、颜色和动画参数来实现期望的效果。希望能对你有所帮助！