CSS实现文字扫光特效
- 手机
- 2025-08-21 03:45:01
上大学的玩 ae 的时候，就曾遇到过这个特效。偶然在百度看到了类似特效，没想到竟然能用 css 实现，所以就研究了一下，文字扫光效果如下：
实现思路：
光效移动效果，可以通过 background-image 设置渐变色模拟光效，然后用动画移动背景图片去移动光效光效掠过文字时，文字颜色需要和光效颜色一致，这里需要使用 css3 的 background-clip:text 属性，同时将前景色设置为透明，这样在背景移动的时候，文字颜色就会和背景色保持一致代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫光文字</title> <style> .shine-box { width: 500px; height: 100px; margin: auto; padding-top: 60px; border-radius: 10px; text-align: center; background-color: black; font-weight: bolder; } .shine-span { background: #656565 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: shine 2s infinite; } @keyframes shine { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } </style> </head> <body> <div class="shine-box"> <span class="shine-span">玉不啄,不成器;人不学,不知道</span> </div> </body> </html>注意：background-clip 在 chrome 中需要添加厂商前缀 -webkit- 才能好使
CSS实现文字扫光特效由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS实现文字扫光特效”
上一篇
提交bug的内容书写规范
下一篇
pytorch实现运动鞋分类
