Css 如何实现扫描条动画？

如何添加连接到移动垂直线的绿色阴影效果

请参见图片，了解我的目标示例

如何在CSS中实现这一点

下面是我已经实现的示例

正文{
高度：100vh；
位置：相对位置；
}
.p:：之前{
内容：''；
显示：内联块；
宽度：12px；
高度：12px；
边界半径：50%；
背景：#18c89b；
位置：相对位置；
右：4px；
}
.OCRP{
颜色：#18c89b；
位置：绝对位置；
底部：-30px；
左：38%；
字体大小：16px；
字号：600；
动画：闪烁1.5s线性无限；
字体系列：无衬线；
文本转换：大写；
}
.ocrloader{
宽度：360px；
身高：225px；
位置：绝对位置；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
最高：40%；
背面可见性：隐藏；
}
.装载机跨度{
位置：绝对位置；
左：35px；
排名：0；
宽度：85%；
高度：5px；
背景色：#18c89b；
盒影：0 0 10px 1px#18c89b，
0 1px 1px#18c89b；
z指数：1；
变换：translateY（95px）；
动画：移动1.7s三次贝塞尔（0.15,0.54,0.76,0.74）；
动画迭代次数：无限；
}
.ocrloader:之前，
.ocrloader:之后，
埃姆：之后，
埃姆：以前{
边框颜色：#18c89b；
内容：“；
位置：绝对位置；
宽度：45px；
高度：46px；
边框样式：实心；
边框宽度：0px；
}
.ocrloader:以前{
左：0；
排名：0；
左边框宽度：5px；
边框顶部宽度：5px；
边界半径：5px0；
}
.ocrloader:之后{
右：0；
排名：0；
右边框宽度：5px；
边框顶部宽度：5px；
边界半径：0 5px 0 0；
}
埃姆：以前{
左：0；
底部：0；
左边框宽度：5px；
边框底宽：5px；
边界半径：0 5px；
}
埃姆：之后{
右：0；
底部：0；
右边框宽度：5px；
边框底宽：5px；
边界半径：0 5px 0；
}
@关键帧移动{
0%,
100% {
变换：translateY（190px）；
}
50% {
转化：translateY（0%）；
}
75% {
变换：translateY（160px）；
}
}
@关键帧闪烁器{
50%{不透明度：0；}
}

扫描

下面是一个使用

框阴影和
剪辑路径的想法


.box{
宽度：200px；
高度：200px；
利润率：20px；
外形：2倍实心；
轮廓偏移：10px；
位置：相对位置；
}
.box：：之前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：20px；
背景：#18c89b；
盒影：0 0 70px 20px#18c89b；
剪辑路径：插入（0）；
动画：
x 0.5s缓进-缓出无限交替，
y 1s输入输出无穷大；
}
@关键帧x{
到{
转化：translateX（-100%）；
左：100%；
}
}
@关键帧y{
33% {
剪辑路径：插入（0-100px）；
}
50% {
剪辑路径：插入（0）；
}
83%{
剪辑路径：插入（0-100px 0）；
}
}

Div带渐变背景。这是关于动画而不是渐变本身，不是渐变太棒了！谢谢你的主意！