css 动画实现从中间到两边亮度逐渐变暗的流水灯效果

先看效果：

快结束效果 随着离中心点距离逐渐边远，亮度逐渐变暗

完整的视线代码如下：

<template>
  <div class="container">
    <div class="runner bottom to-right"></div>
    <div class="runner bottom to-left"></div>
  </div>
</template>

<script setup>

</script>

<style  lang="less">



html, body{
  height: 100%;
  background-color: black;
}
.container{
  position: relative;
  height: 80px;
  .runner {
    --title-back-linear-2: linear-gradient(
        to right, // 从左到右的现线性渐变
        transparent 0%, // 完全透明
        rgba(255, 255, 255, 1) 50%,
        transparent 100% // 完全不透明
    );
    --title-back-linear-3: linear-gradient(
        to right,
        transparent -50%,
        rgba(255, 255, 255, 1) 50%,
        transparent 150%
    );
    position: absolute;
    &.bottom {
      bottom: 4px;
      left: calc(50% - 20px);
      //left: 50%;
    }
    width: 40px;
    height: 2px;
    background: var(--title-back-linear-2); // 把这行注释了会看到不是一条线了，而是一个点
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.4),
                -5px 5px 10px rgba(255, 255, 255, 0.4),
                5px -5px 10px rgba(255, 255, 255, 0.4),
                -5px -5px 10px rgba(255, 255, 255, 0.4),//; // 感觉把下边这四个注释了也没多大差别
                5px 5px 30px rgba(255, 255, 255, 0.4),
                -5px 5px 30px rgba(255, 255, 255, 0.4),
                5px -5px 30px rgba(255, 255, 255, 0.4),
                -5px -5px 30px rgba(255, 255, 255, 0.4);
    &::after {  // 起个加强亮度的作用吧
      content: '';
      position: absolute;
      display: block;
      width: 10px;
      height: 1px;
      bottom: 0;
      left: calc(50% - 5px);
      background: var(--title-back-linear-3);
      box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.4),
      -5px 5px 10px rgba(255, 255, 255, 0.4),
        5px -5px 10px rgba(255, 255, 255, 0.4),
        -5px -5px 10px rgba(255, 255, 255, 0.4),
      5px 5px 30px rgba(255, 255, 255, 0.4),
      -5px 5px 30px rgba(255, 255, 255, 0.4),
        5px -5px 30px rgba(255, 255, 255, 0.4),
        -5px -5px 30px rgba(255, 255, 255, 0.4);
    }

    // ~ 4 动画
    &.to-right {
      animation: toRight 5s ease infinite ;  // normal可以不用写，写alternate会反向动画
    }

    &.to-left {
      animation: toLeft 5s ease infinite normal;
    }
  }
  @keyframes toLeft {
    0% {
      left: calc(50% - 20px);
      opacity: 1;
    }
    100% {
      left: 0;
      opacity: 0;
    }
  }
  @keyframes toRight {
    0% {
      left: calc(50% - 20px);
      opacity: 1;
    }
    100% {
      left: calc(100% - 40px);
      opacity: 0;
    }
  }
}

</style>