核心：
- 主元素渲染文本，背景设置或继承深色系颜色；
- 与主元素同尺寸的伪元素做遮盖层，该伪元素使用 mask 遮罩属性显露主元素内容，mask-size 在水平方向的值小于总长度，其背景与主元素背景同色系、带透明度；
- 为高亮所有文本起见，根据渐变设计，mask-position 动画在水平方向的值设置为适当超越左或右边界。
代码（可在线预览）：
<style>
/* 黑色背景 */
body { background: black; }
/* 主元素 ：根据内容自适应宽高 */
.tdiv {
width: fit-content;
height: fit-content;
font-size: 4vw;
font-weight: bold;
color: snow;
text-shadow: -2px -2px 6px silver;
margin: 30px auto 0;
position: relative;
}
/* 伪元素 ：遮罩 */
.tdiv::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.65);
/* x方向位置倒回10%基于其20%尺寸（mask-size）计算 */
mask: linear-gradient(90deg, red, transparent) no-repeat 0 0 / 20% 100%;
animation: maskmove 6s linear infinite alternate;
}
/* 动画 ：遮罩位置变化，x方向位置越过右边界30% */
@keyframes maskmove {
to { mask-position: 130% 100%; }
}
</style>
<div class="tdiv">明月樓高休獨倚，酒入愁腸，化作相思淚</div>
扩展：
本例使用线性渐变做伪元素遮罩图案，可以尝试使用径向渐变（radial-gradient）、圆锥渐变（comic-gradient）、图片等做更奇妙的遮罩效果。
| 
发表于