【CSS】实现扫光特效

【CSS】实现扫光特效

引用

CSDN

1.

https://blog.csdn.net/weixin_57208584/article/details/140642592

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

关键步骤

• 伪元素设置position :absolute【也可以不用伪元素，直接创建一个absolute元素盖在上面】
• 设置渐变linear-gradient背景色
• 设置透明度
• 将元素transform :skewX(..)，在水平方向上设置畸变压缩。可参考MDN 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:inline
    display: 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%"，使其从指定位置开始运动
具体使用方法可见：MDN animation-fill-mode