css实现酷炫的扫光效果

 文字版

<template>
     <h1 class="scan-str">测试文字</h1>
</template>

<style>
.scan-str {
    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-str 2s infinite;
}
@keyframes scan-str {
    to {
        background-position: 200%;
    }
}
</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>

本文转载画一个圆_-优快云博客