CSS高光游移文本效果

马黑黑

核心：

1. 渐变背景应用于文本（background-clip: text;），background-size 水平方向设为小于 100%；
2. 文本前景色使用透明（transparent）或部分透明（a通道）；
3. 关键帧动画使用 background-position 实现（改变背景位置）；

代码：

<style>
    body { background: #000; }
    .pa {
        position: absolute;
        font-size: 4vw;
        font-weight: bold;
        background: linear-gradient(180deg, cyan, white) no-repeat 0 0 / 35% 100%;
        background-clip: text;
        color: rgba(250, 250, 250, .25);
        text-shadow: 2px 2px 4px rgba(0, 200, 0, .15);
        filter: drop-shadow(2px 2px 4px lightgreen);
        animation: bmove linear 6s infinite alternate;
    }
    @keyframes bmove {
        to { background-position: 100% 100%; }
    }
</style>

<div class="pa">自古英雄出少年，似水红颜惹人怜</div>
    

马黑黑

【附】注意文本修饰的相关问题

由于文本使用透明或部分透明方式做前景色，文本阴影的颜色会以渗透的方式直接作用于 color 属性，这是需要考虑得设计因素。

杨帆

漂亮的CSS高光游移文本效果，谢谢马老师精彩演示

梦江南

漂亮的CSS高光来回游移文本效果，黑黑老师辛苦了！

霜染枫丹

很漂亮的效果，适合很多场景，感谢马老师分享，赞佩~~也抱走了，祝安好！