对于要重点突出的元素，我们经常可以看到它上面打了一个从左到右的斜向扫光，显得元素亮闪闪的！类似于下图的亮光动效

关键步骤

• 伪元素设置position :absolute【也可以不用伪元素，直接创建一个absolute元素盖在上面】
• 设置渐变linear-gradient背景色
• 设置透明度
•  将元素transform :skewX(..)，在水平方向上设置畸变压缩。可参考https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
• 设置扫动动画的keyframe，控制该定位元素的left变化

实现方法

假设我要在class="container"的盒子元素上设置扫光特效，可以用如下css代码实现：

//container
.container {width: 44vw;height: 16vh;border-radius: 8px;border: 1px solid red;background-color: black;
}//扫光伪元素
.container::before {content: '';z-index: 999;//伪元素默认是 display:inlinedisplay: inline-block;position: absolute;left: 0;top: 0;width: 30vw;height: 16vh;//让光斜着扫transform: skewX(135deg);opacity: 0.2;background: linear-gradient(246.64deg, rgba(255, 255, 255, 0) 30.82%, #ffffff 45.23%, #ffffff 56.8%, rgba(255, 255, 255, 0) 70.24%);//animation: 关键帧名 执行delay fill-mode 重复次数animation: move-light 3s both infinite;
}@keyframes move-light {0% {left: -50%;}100% {left: 125%;}
}

值得一提的是：设置animation中的fill-mode为both之后，扫光立马应用上了第一个style配置"left:-50%"，使其从指定位置开始运动

具体使用方法可见：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode