css 光影掠过文字效果

光影:通过渐变背景图产生
文字上有光影:background-clip:text;属性

效果图:
文字上白色的光影是会移动的

代码示例:

html, body {
    
    
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
    display: flex;
}

p {
    
    	//没啥用处
    position: relative;
    margin: auto;
    font-size: 5rem;
    word-spacing: 0.2em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    background-color: #E8A95B;
    background-clip: text;
}

p::after {
    
    	//这里开始实现效果
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    //生成的光影渐变背景
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine 5s infinite linear;	//这里光影通过背景位置改变产生,也能使用@property产生过渡
}

@keyframes shine {
    
    
    0% {
    
    
        background-position: 50% 0;
    }
    100% {
    
    
        background-position: -190% 0;
    }
}