css3 文字扫光 |css 下划线粗细

/* 代码注释：使用关键帧动画实现文字扫光效果 */
@keyframes scan{
0%{
background-position: -300%;
}
100%{
background-position: 300%;
}
}
/* 应用效果的样式 */
.scan-effect{
background: linear-gradient(90deg, transparent, #fff, transparent); /* 渐变背景 */
background-size: 200% 100%;
animation: scan 2s infinite;
}

如上代码，大家通过定义一个名为scan-effect的样式，使通过该类应用的文本具有扫光的效果。该效果的原理是通过渐变背景实现，而动画关键帧则控制背景位置的移动，从而实现了扫光效果。该动画被定义为一个永久循环的动画序列。

需要注意的是，在使用该效果时，应该避免对用户阅读造成影响。因此，过多的扫光效果可能会影响用户体验，应该谨慎使用。