CSS实现的扫光效果组件

---

theme: lilsnake

图片和内容如有侵权，及时与我联系~
详细内容与注释：

CSS实现的扫光效果组件

代码

技术栈与框架

Vue3

CSS

扫光效果的原理

扫光效果的原理就是从左到右无限循环的一个位移动画

实现方式

适配文字扫光效果的css

.shark-box { /* 文字样式 */font-size: 60px; font-weight: normal; /* 扫光样式-文字 */ -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; -webkit-background-clip: text; animation: shark-box 2s infinite; } 
/* 文字 */ 
@keyframes shark-box { from { background-position: -100%; } to { background-position: 200%; } 
}

效果图

适配图片扫光效果的css

/* 图片扫光样式 */ 
.card { display: flex; justify-content: center; align-items: center; img { display: block; border-radius: 8px; } 
} 
/* 伪元素实现图片扫光 */ 
.shark-img { //定位图片，超出隐藏 position: relative; overflow: hidden; img { object-fit: cover; } &::after { content: ""; position: absolute; inset: -20%; background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60% ); animation: shark-img 2s infinite; transform: translateX(-100%); } 
} 
/* 图片 */ 
@keyframes shark-img {to { transform: translateX(100%); } 
}

效果图

针对不规则样式

 <!-- 针对不规则图形，增加 -webkit-mask 配置 --><divclass="shark-img card"v-else-if="props.src":style="props.src.includes('png')? {mask: `url(${props.src}) no-repeat center / cover`,'-webkit-mask': `url(${props.src}) no-repeat center / cover`,}: {}"><img :src="props.src" alt="未找到图片" /></div>

效果图

组件代码

https://code.juejin.cn/pen/7394752941250314250