马黑黑《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">
<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>
</pre></div>
<h3>2️⃣clip-path 关键帧动画的实现</h3>
<p>仍以圆形裁剪为例，有很多方式可以利用 clip-path 属性实现CSS关键帧动画，最容易想到的是裁剪半径大小的变化。不过下例我们是通过改变裁剪的水平位置来实现圆形的移动效果：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<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>
</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">
<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>
</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>
卡片使用两个叠加的子元素做成。开始时，第一个不做任何变换（可见），第二个在Y轴做-180度翻转（不可见）；鼠标指针移入容器，两个子元素均做相应的翻转：第一个转为背对观察者（不可见）、第二个正对观察者（可见）。
核心：
（一）设置3d转换环境（body的 perspective、.pa 的 transform-style、.son 的 transform）；
（二）子元素 .son 的 backface-visibility 属性设置；
（三）.pa 的两个 hover 伪类选择器设置，分别指向子元素 .son:nth-of-type(1/2)
实用的教程，谢谢分享
页:
[1]