CSS mask 实现文本高亮动画

马黑黑

核心：

1. 主元素渲染文本，背景设置或继承深色系颜色；
2. 与主元素同尺寸的伪元素做遮盖层，该伪元素使用 mask 遮罩属性显露主元素内容，mask-size 在水平方向的值小于总长度，其背景与主元素背景同色系、带透明度；
3. 为高亮所有文本起见，根据渐变设计，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）、图片等做更奇妙的遮罩效果。

马黑黑

mask 属性自 2019 年起正式成为标准，chromium 内核 120+ 无障碍，绝大多数现代浏览器完美支持。

若考虑兼容 chromiun 120- ，可在 mask 属性上一行加 -webkit-mask，属性值和 mask 属性一致。

马黑黑

mask 属性值对应于 background 属性值，例如一楼示例的 mask-position 对应于 background-position，其它的可依此类推

马黑黑

mask 所设置的遮罩：任意非透明的区域显露对象、透明的区域遮挡对象。

梦江南

这种代码效果很好看，特别用在今天中元节上很合适。谢谢黑黑老师！