扫描光效动画css实现

想实现扫描生效的动画，主要是通过伪元素 (::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>

希望能和大家一起学习！！！

扫描光效动画css实现

主要css如下：

这里面还有一部关键部分那就是关键帧动画

什么是@keyframsne？

写一个demo让大家参考参考

猜你喜欢