[分享]css3文字扫光

CSS3文字扫光是CSS3的一个比较酷炫的特效，可以让文本实现类似于扫光一样的动态效果。

/* CSS3文字扫光 */
.text {
    background: linear-gradient(to right, transparent 50%, #fff 50%);
    /* 背景渐变，将扫过的部分设置为透明，未扫过的部分为白色 */
    background-size: 200% 100%;
    /* 背景大小为两倍宽度 */
    animation: scan 2s linear infinite;
    /* 动画：名为scan，持续时间2秒，线性运动，无限循环 */
}
@keyframes scan {
    0% {
        background-position: left top;
        /* 从左侧开始扫过 */
    }
    100% {
        background-position: right top;
        /* 扫到右侧为止 */
    }
} 

通过实现CSS3文字扫光，我们可以让页面更有层次感和动态性，吸引用户的目光。