马黑黑《css clip-path实现文本高亮动画》

醉美水芙蓉

1️⃣认识 clip-path 属性

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

以下例子直观演示 clip-path 将伪元素裁剪为一个小球（伪元素原始尺寸与主元素一致，主伪元素位置重合）：

<style>
    .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;
    }
</style>

<div class="pa"></div>
    

2️⃣clip-path 关键帧动画的实现

仍以圆形裁剪为例，有很多方式可以利用 clip-path 属性实现CSS关键帧动画，最容易想到的是裁剪半径大小的变化。不过下例我们是通过改变裁剪的水平位置来实现圆形的移动效果：

<style>
    .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%); }
    }
</style>

<div class="pa"></div>
    

依此，倘若使用矩形裁剪替代圆形裁剪，我们就可以通过 clip-path 属性实现——

3️⃣文本高亮动画

核心：① clip-path: inset(上, 右, 下, 左); 改变左切割量，从 0 到 100% 的变化过程；② 伪元素背景设置为与主元素同色、带透明（遮挡、暗化文本）——

<style>
    .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%); }
    }
</style>

<div class="cDiv">畫圖省識春風面，環佩空歸月夜魂</div>
    

醉美水芙蓉

卡片使用两个叠加的子元素做成。开始时，第一个不做任何变换（可见），第二个在Y轴做-180度翻转（不可见）；鼠标指针移入容器，两个子元素均做相应的翻转：第一个转为背对观察者（不可见）、第二个正对观察者（可见）。 核心： （一）设置3d转换环境（body的 perspective、.pa 的 transform-style、.son 的 transform）； （二）子元素 .son 的 backface-visibility 属性设置； （三）.pa 的两个 hover 伪类选择器设置，分别指向子元素 .son:nth-of-type(1/2)