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

css clip-path实现文本高亮动画

<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">
    <h3>1️⃣认识 clip-path 属性</h3>
    <blockquote>clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</blockquote>
    <p>以下例子直观演示 clip-path 将伪元素裁剪为一个小球（伪元素原始尺寸与主元素一致，主伪元素位置重合）：</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .pa {
      width: 800px;
      height: 400px;
      border: thick inset teal;
      position: relative;
      margin: 30px auto 0;
    }
    .pa::after {
      content: '';
      width: 100%;
      height: 100%;
      background: teal;
      /* 圆形裁剪 ：半径=180px，圆心在中央 */
      clip-path: circle(180px at 50% 50%);
      position: absolute;
    }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;
    </pre></div>
    <h3>2️⃣clip-path 关键帧动画的实现</h3>
    <p>仍以圆形裁剪为例，有很多方式可以利用 clip-path 属性实现CSS关键帧动画，最容易想到的是裁剪半径大小的变化。不过下例我们是通过改变裁剪的水平位置来实现圆形的移动效果：</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .pa {
      width: 800px;
      height: 400px;
      border: thick outset teal;
      box-sizing: border-box;
      position: relative;
      margin: 30px auto 0;
    }
    .pa::after {
      content: '';
      width: 100%;
      height: 100%;
      background: teal;
      clip-path: circle(120px at -120px 50%);
      animation: move linear 10s infinite;
      position: absolute;
    }
    @keyframes move {
      to { clip-path: circle(120px at 920px 50%); }
    }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;
    </pre></div>
    <p>依此，倘若使用矩形裁剪替代圆形裁剪，我们就可以通过 clip-path 属性实现——</p>
    <h3>3️⃣文本高亮动画</h3>
    <p>核心：① <mark>clip-path: inset(上, 右, 下, 左);</mark> 改变左切割量，从 0 到 100% 的变化过程；② 伪元素背景设置为与主元素同色、带透明（遮挡、暗化文本）——</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .cDiv {
      width: fit-content;
      height: fit-content;
      font: bold 4vw sans-serif;
      color: yellow;
      background: rgb(0, 100, 0);
      padding: 20px 40px;
      position: relative;
      margin: 30px auto;
    }
    .cDiv::after {
      position: absolute;
      content: '';
      inset: 0; /* 与主元素重叠 */
      background: rgba(0, 100, 0, .5);
      /* 初始 ：啥也不割 */
      clip-path: inset(0 0 0 0);
      animation: cmove linear 12s infinite alternate;
    }
    /* 动画 ：左边界割100% */
    @keyframes cmove {
      to { clip-path: inset(0 0 0 100%); }
    }
&lt;/style&gt;

&lt;div class="cDiv"&gt;畫圖省識春風面，環佩空歸月夜魂&lt;/div&gt;
    </pre></div>
</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-28 23:23

clip-path的灵活运用，得到的效果很好{:4_199:}

梦江南 发表于 2026-8-29 21:10

谢谢黑黑老师辛苦，学习了。{:4_190:}

杨帆 发表于 2026-8-29 22:00

漂亮~以css clip-path实现的 文本高亮动画，谢谢马老师精彩示范{:4_180:}

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

杨帆 发表于 2026-8-29 22:00
漂亮~以css clip-path实现的 文本高亮动画，谢谢马老师精彩示范

感谢支持

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

梦江南 发表于 2026-8-29 21:10
谢谢黑黑老师辛苦，学习了。

{:4_190:}

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

红影 发表于 2026-8-28 23:23
clip-path的灵活运用，得到的效果很好

{:4_180:}
页: [1]
查看完整版本: css clip-path实现文本高亮动画