CSS实现一个文字背景色渐变从左向右移动功能

.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 3s infinite;
}
 
@keyframes shine {
    from {
        background-position: 0% 0%;
    }
 
    to {
        background-position: 130% 100%;
    }
}

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_71398262/article/details/140718860