几分钟教你实现一个酷炫的扫光效果

前言

话不多说，咱们先来看看本篇文章中我们实现的效果。

是不是发现这个效果非常的熟悉？没错，这经常能够在一些电商网站可以看到，那这究竟是怎么实现的呢？接下来由我来带领大家尝试做一个类似这样的效果出来。

实现

其实上面的样式实现起来都到差不差的，实际上都是利用一个位移动画将一个倾斜的光线从左到右移动给用户造成一种视觉的误差，怎么样？是不是把你也给骗到了😂。如果还不明白的话我将这条线设置为红色并关闭动画你就明白了。

这条线也可以根据不同的需求来进行调整，只需要将linear-gradient(45deg,xxxx)中的偏转角度修改一下即可，比如我修改为 125deg效果如下：

这里我将扫光的这条线设置为transform: translateX(20%)，位移动画就是实际上就是将这条线从最左边移动到最右边去。那有的小伙伴可能就会问，那文字扫光呢？文版扫光其实也差不多的原理。接下来我们分别进行实现吧！

文本扫光

文本扫光的核心思想是利用background-clip: text属性和渐变色背景来创建动态的文本效果。通过设置文本颜色为透明，并使用currentColor来保持渐变色的一致性，初次之外我们还要将文本的颜色设置为透明，以便隐藏实际的文本颜色，让渐变背景色显示出来，即webkit-text-fill-color: transparent。具体实现如下：

<template>
     <h1 class="scan-txt">画一个圆</h1>
</template>

<style>
.scan-txt {
    font-weight: bold;
    color: #4781ff;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%) -100%/50% no-repeat currentColor;
    background-clip: text;
    animation: scan-txt 2s infinite;
}
@keyframes scan-txt {
    to {
        background-position: 200%;
    }
}
</style>

或者使用，两者实现起来都差不多的。

<template>
    <span class="scan-txt2">几分钟教你实现一个酷炫的扫光效果</span>
</template>

<style>
.scan-txt2 {
    background: #161515 linear-gradient(to left, transparent, #fff, transparent) no-repeat 0 0;
    background-size: 20% 100%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: scan-text2 2s infinite;
}

@keyframes scan-text2 {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}
</style>

实现效果：

图片扫光

图片扫光因为不能直接在背景进行扫光，那么我们可以另辟蹊径使用一个左右位移的伪元素来覆盖在图片容器上面也可以达到这个效果。

<template>
   <div class="scan-wrap card">
     <img src="./02.jpg" />
   </div>
</template>

<style>
.card {
    border-radius: 10px;
}
.scan-wrap {
    position: relative;
    overflow: hidden;
}

.scan-wrap::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0) 60%);
    animation: scan-wrap 2s infinite;
    transform: translateX(-20%);
}
@keyframes scan-wrap {
    to {
        transform: translateX(100%);
    }
}
</style>

效果如下：

不规则图片

不规则图片就比上面图片的方式多了一点处理方式—mask，如果不清楚这个属性的同学可以前往我的这篇文章学习一下都2024年了你还没有开始探索 CSS 属性 mask 吗？。

<tempalte>
   <div class="scan-wrap mask-gift">
     <img
       class="logo"
       src="https://raw.githubusercontent.com/XboxYan/tuchuang/main/img/3af9e8de.00uqxe.png"
     />
   </div>
</template>
<style>
.scan-wrap {
    position: relative;
    overflow: hidden;
}

.scan-wrap::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0) 60%);
    animation: scan-wrap 2s infinite;
    transform: translateX(-20%);
}
@keyframes scan-wrap {
    to {
        transform: translateX(100%);
    }
}
.mask-gift {
    mask: url(xxxx) 0 0/100%;
}
</style>

效果如下：

总结

以上就本文的全部内容了，接下来对本文的内容进行总结：

• 扫光样式可以通过线性渐变来创建，这种方法简单且效果良好。
• 扫光动画的实现通常需要改变元素的位置或背景位置，这可以通过 CSS 的 transform 或 background-position 属性来实现。
• 对于文本元素，可以通过改变 background-position 来实现扫光动画。但是，需要注意的是，如果背景尺寸等于容器尺寸，那么设置 background-position 的百分比将无效。
• 对于普通的容器元素，如果直接使用背景来实现扫光效果，可能会被容器内的其他元素覆盖。这时，可以使用伪元素来创建扫光效果。
• 对于不规则的图片，直接使用扫光效果可能会产生多余的部分。这时，可以使用 CSS 的 mask 属性来根据图片的形状裁剪掉多余的部分。
• 在实现扫光动画时，还需要注意动画的性能问题。尽量使用硬件加速的 CSS 属性（如 transform 和 opacity），避免触发页面的重排或重绘，以提高动画的性能。