【css】实现扫光特效

音仔小瓜皮2024-07-24 15:20

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

关键步骤

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

实现方法

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

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%"，使其从指定位置开始运动

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