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>