马黑黑 发表于 2026-8-27 13:30

CSS mask 实现文本高亮动画

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
    .artBox p { margin: 10px 0; }
</style>

<div class="artBox">
    <p>核心：</p>
    <blockquote>
      <ol>
            <li>主元素渲染文本，背景设置或继承深色系颜色；</li>
            <li>与主元素同尺寸的伪元素做遮盖层，该伪元素使用 mask 遮罩属性显露主元素内容，mask-size 在水平方向的值小于总长度，其背景与主元素背景同色系、带透明度；</li>
            <li>为高亮所有文本起见，根据渐变设计，mask-position 动画在水平方向的值设置为适当超越左或右边界。</li>
      </ol>
    </blockquote>
    <p>代码（可在线预览）：</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    /* 黑色背景 */
    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%; }
    }
&lt;/style&gt;

&lt;div class="tdiv"&gt;明月樓高休獨倚，酒入愁腸，化作相思淚&lt;/div&gt;
    </pre></div>
    <p>扩展：</p>
    <p>本例使用线性渐变做伪元素遮罩图案，可以尝试使用径向渐变（radial-gradient）、圆锥渐变（comic-gradient）、图片等做更奇妙的遮罩效果。</p>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

马黑黑 发表于 2026-8-27 13:33

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

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

马黑黑 发表于 2026-8-27 13:40

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

马黑黑 发表于 2026-8-27 13:42

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

梦江南 发表于 2026-8-27 13:44

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

红影 发表于 2026-8-28 12:28

遮罩效果好像以前讲过的，现在看看仍很神奇{:4_187:}

霜染枫丹 发表于 2026-8-28 17:14

马老师下午好！

很漂亮的视觉效果，喜欢有变化的制作。先抱走留存，找个时间好好捉摸一下。谢谢马老师的分享！{:4_204:}{:4_190:}

马黑黑 发表于 2026-8-28 21:37

霜染枫丹 发表于 2026-8-28 17:14
马老师下午好！

很漂亮的视觉效果，喜欢有变化的制作。先抱走留存，找个时间好好捉摸一下。谢谢马老师的 ...

条条道路通罗马

马黑黑 发表于 2026-8-28 21:38

红影 发表于 2026-8-28 12:28
遮罩效果好像以前讲过的，现在看看仍很神奇

理论懂了不等于就能应用

马黑黑 发表于 2026-8-28 21:38

梦江南 发表于 2026-8-27 13:44
这种代码效果很好看，特别用在今天中元节上很合适。谢谢黑黑老师！

{:4_190:}

小辣椒 发表于 2026-8-28 21:41

其实遮罩效果我最应该学习的，平时做的图可以用上这个效果，可惜我不会运用代码

马黑黑 发表于 2026-8-28 21:43

小辣椒 发表于 2026-8-28 21:41
其实遮罩效果我最应该学习的，平时做的图可以用上这个效果，可惜我不会运用代码

不急慢慢来

杨帆 发表于 2026-8-29 21:48

以CSS mask 实现的又一种文本高亮动画，谢谢马老师精彩示范{:4_180:}

马黑黑 发表于 2026-8-29 23:36

杨帆 发表于 2026-8-29 21:48
以CSS mask 实现的又一种文本高亮动画，谢谢马老师精彩示范

同一类效果，可以有多种实现方式

杨帆 发表于 2026-8-30 08:18

马黑黑 发表于 2026-8-29 23:36
同一类效果，可以有多种实现方式

是，异曲同工之妙

马黑黑 发表于 2026-9-1 18:13

杨帆 发表于 2026-8-30 08:18
是，异曲同工之妙

对，殊途同归
页: [1]
查看完整版本: CSS mask 实现文本高亮动画