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