想实现扫描生效的动画，主要是通过伪元素 (::after) 的定义，通常用于在元素后面添加装饰性的内容。在这个例子中，伪元素创建了一个动画效果，让它看起来像是一个扫描光效果。
主要css如下：
.element {
position: relative; /* 使伪元素绝对定位相对于这个元素 */
}
.element::after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200%;
height: 50px;
background-image: linear-gradient(132deg, rgb(37 37 37 / 0%) 0%, rgb(255 255 255 / 20%) 50%, rgb(37 37 37 / 0%) 100%);
transform-origin: center center;
transform: translate(-100%, 50%) rotate(45deg);
animation: ScanLights 3s linear 1s infinite;
}各个属性解释：
content: "": 创建一个空的伪元素。position: absolute: 使伪元素的定位方式相对于其最近的定位祖先元素（即position属性不是static的最近祖先元素）。display: block: 使伪元素成为一个块级元素。top: 0,right: 0,bottom: 0,left: 0: 这些属性将伪元素定位在其包含块的四个边缘。width: 200%: 设置伪元素的宽度为其包含块宽度的两倍。height: 50px: 设置伪元素的高度为 50 像素。background-image: linear-gradient(...): 创建一个线性渐变背景，渐变从 132 度开始，透明色（rgb(37 37 37 / 0%)）到 0%，中间是半透明白色（rgb(255 255 255 / 20%)），到 100% 结束再回到透明色。transform-origin: center center: 设置变换的基点为元素的中心。transform: translate(-100%, 50%) rotate(45deg): 平移和旋转伪元素，将其移动到左边并旋转 45 度。animation: ScanLights 3s linear 1s infinite: 应用名为ScanLights的动画，持续 3 秒，以线性方式执行，延迟 1 秒开始，并无限循环。
这里面还有一部关键部分那就是关键帧动画
@keyframes ScanLights {
0% {
transform: translate(-100%, 50%) rotate(45deg);
}
100% {
transform: translate(100%, 50%) rotate(45deg);
}
}
这个动画从 0% 到 100% ：
0%: 伪元素从相对于中心点的 -100% 水平偏移开始，并旋转 45 度。100%: 伪元素移动到相对于中心点的 100% 水平偏移位置，保持 45 度旋转。
什么是@keyframsne？
我找了MDN的官方文档给大家看看，源地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
写一个demo让大家参考参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scan Light Effect</title>
<style>
.element {
position: relative;
width: 300px;
height: 150px;
background-color: #333;
overflow: hidden;
margin: 0 auto;
}
.element::after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200%;
height: 50px;
background-image: linear-gradient(
132deg,
rgb(37 37 37 / 0%) 0%,
rgb(255 255 255 / 20%) 50%,
rgb(37 37 37 / 0%) 100%
);
transform-origin: center center;
transform: translate(-100%, 50%) rotate(45deg);
animation: ScanLights 3s linear 1s infinite;
}
@keyframes ScanLights {
0% {
transform: translate(-100%, 50%) rotate(45deg);
}
100% {
transform: translate(100%, 50%) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
希望能和大家一起学习！！！
标签：动画,50%,100%,元素,37,transform,光效,0%,css From： https://blog.csdn.net/J123375644/article/details/140313504