CSS相抵路径动画自适应路径设计
<style>@import 'https://638183.freep.cn/638183/web/css/hl.css';
.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; }
.artBox pre { white-space: pre-wrap; font-size: 16px; background: #eee; border-radius: 10px; }
.tMid { text-align: center; }
.tRed { color: red; }
#myta { width: 600px; min-width: 100px; height: 200px; min-height: 50px; font-size: 20px; resize: both; padding: 10px; margin: 16px 0; }
#papa { width: 600px; min-width: 200px; height: 300px; min-height: 100px; border: 1px solid gray; overflow: hidden; resize: both;
position: relative; margin: auto; }
#son { position: absolute; width: 40px; height: 40px; background: tan; animation: move linear 6s infinite alternate; }
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
</style>
<div class="artBox">
<p>相抵路径CSS动画可以实现元素在任意指定路径上定位或移动，用到两个业已成熟、被现代浏览器广泛支持的CSS属性：</p>
<blockquote><mark>offset-path</mark> CSS 属性指定一个供元素跟随的路径，并决定该元素在其父容器或 SVG 坐标系中的位置。这个路径可以是直线、曲线或几何图形，元素将沿着它定位或移动。在 offset-path 上定位或移动元素，通过 <mark>offset-distance</mark> CSS 属性实现。</blockquote>
<p>给元素设置 <mark>offset-path</mark>，使用 <mark>path</mark> 函数，函数内的字符串用以描述路径细节，形式与含义等同于SVG <mark><path></mark> 元素的 <mark>d</mark> 属性值：</p>
<pre class="hlCode">offset-path: path('M 20 100 L200 160 L380 20');</pre>
<p>描述元素在 path 路径上的定位或移动位置，使用 <mark>offset-distance</mark> 属性，值通常用百分比表示：</p>
<pre class="hlCode">offset-distance: 30%;</pre>
<p>——这就是所谓的相抵路径动画的核心：<span class="tRed">约束元素的路径（offset-path）+ 元素在路径上的偏移距离（offset-distance）</span>。</p>
<p>而 offset-path 路径来源于 SVG path 元素的 d 属性，路径描述的数据使用绝对单位（默认px），这样，当元素所在的父元素尺寸可以变大变小，CSS 初始设计的路径就不适用，需要动态改变，这得祭出JS，具体思路是：</p>
<ol>
<li>使用 <mark>ResizeObserver</mark> API 监听父元素尺寸变化</li>
<li>父元素尺寸发生变化时给子元素动态创建 offset-path 路径</li>
</ol>
<blockquote><mark>ResizeObserver</mark> 接口允许监视 Element 的内容盒、边框盒或 SVGElement 的边界框尺寸的变化。这个接口提供了一种避免无限回调循环和循环依赖的方法，它通过在后续帧中处理更深层次的 DOM 元素来实现这一点。根据规范，resize 事件应该在绘制前和布局后调用。</blockquote>
<p>以下实例通过 ResizeObserver 实现对 textarea 元素的尺寸变化实施实时观察，且任何时候任何变化都同步将尺寸展示在 textarea 内。可以尝试拖曳 textarea 右下角改变其尺寸：</p>
<p class="tMid"><textarea id="myta"></textarea></p>
<p>核心代码：</p>
<pre class="hlCode">const <span class="tRed">myta</span> = document.querySelector('#myta'); // 获取textarea
// 创建尺寸变化观察器
const Observer = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect; // 获取宽高
myta.value = `${width} * ${height}`; // 显示变化结果
});
});
// 对 myta 进行监视（实例化观察器）
Observer.observe(<span class="tRed">myta</span>);</pre>
<p>上例，ResizeObserver API 的使用并不复杂，就两个步骤：创建监视器用以观察元素尺寸变化并依据变化的尺寸处理逻辑业务、绑定指定元素进行观察。在本例基础上，把业务逻辑换成设置 offset-path 动态路径，就可以实现本文的命题。</p>
<p>为简化起见，这里设计的路径用Q指令绘制。Q指令继承上一个坐标点，以其为起点绘制一根到达终点的曲线，曲线弧度和朝向由控制点坐标控制，语法结构如下：</p>
<pre class="hlCode">/* M 指令如果省略，Q 指令会以上一个操作的坐标点作为曲线的出发点 */
Q ctrlX ctrlY, endX endY</pre>
<p>这里假设相抵路径从父元素的左上角(20,20)出发，曲线弧面朝下，控制点为(ctrlX,ctrlY)，终点是父元素的右上角(endX,20)。其中的几个未知数：</p>
<blockquote>
<ol>
<li>ctrlX ：控制点x坐标 = 父元素宽度 ÷ 2</li>
<li>ctrlY ：控制点y坐标 = 父元素高度 × 1.8（系数可以微调）</li>
<li>endX ：终点x坐标 = 父元素宽度 - 20</li>
</ol>
</blockquote>
<p>这样设计，相抵路径在水平方向上自始至终保持始于左上角止于右上角的布局安排，曲线弧面永远朝下且基本抵近（有时超越、有时略拉开距离）父元素的下边框（实际应用应根据场景微调系数或设计更为精准的算法）。来看完整的实例演示，该示例可以调整父元素的尺寸，调整过程中子元素的运动路径会实时跟着基本适配父元素的尺寸：</p>
<div id="papa">
<div id="son"></div>
</div>
<p>完整代码：</p>
<pre class="hlCode"><style>
/* 父元素 */
#papa {
width: 600px;
min-width: 200px;
height: 300px;
min-height: 100px;
border: 1px solid gray;
overflow: hidden; /* 调整元素尺寸不能使用默认值 visible */
resize: both; /* 宽高尺寸均可手动调整 */
position: relative;
margin: auto;
}
/* 子元素 */
#son {
position: absolute;
width: 40px;
height: 40px;
background: tan;
animation: move linear 6s infinite alternate;
}
/* 相抵路径动画 */
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
</style>
<div id="papa">
<div id="son"></div>
</div>
<script>
const papa = document.querySelector('#papa'); // 获取父元素
const son = document.querySelector('#son'); // 获取子元素
// 创建监视器（观察尺寸变化+设置动态 offset-path 路径）
const PathObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
const startX = 20, startY = 20;
const endX = width - startX, endY = startY;
const ctrlX = width / 2, ctrlY = height * 1.8;
son.style.setProperty('offset-path', `path('M ${startX} ${startY} Q ${ctrlX} ${ctrlY},${endX} ${endY}')`);
});
});
PathObserver.observe(papa); // 指定 papa 为监视对象
</script></pre>
<p>显然上面的演示不够专业，尤其是Q曲线控制点的算法过于粗糙，在垂直方向只实现了大体上的路径适配。这在普通应用场景来说已经足够了。我们只需注意：路径的初始设计时考虑的是基于父元素固定宽高，然后不论父元素的尺寸如何变化，我们都按一定的算法去计算路径的各个参数所需的数据，使之尽可能地适配父元素尺寸。一般来说，路径越复杂，逻辑业务的处理就越琐碎、难弄，需要准备好算法、仔细处理。本文的示例仅作为参考，如果能从中得到启发，善莫大焉。</p>
</div>
<script>
const myta = document.querySelector('#myta');
const papa = document.querySelector('#papa');
const son = document.querySelector('#son');
const Observer = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
myta.value = `${width} * ${height}`;
});
});
Observer.observe(myta);
// 创建监视器（观察尺寸变化+设置动态 offset-path 路径）
const PathObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
const startX = 20, startY = 20;
const endX = width - startX, endY = startY;
const ctrlX = width / 2, ctrlY = height * 1.8;
son.style.setProperty('offset-path', `path('M ${startX} ${startY} Q ${ctrlX} ${ctrlY},${endX} ${endY}')`);
});
});
PathObserver.observe(papa); // 指定 papa 为监视对象
</script> 黑黑老师的详细讲解，慢慢学习。晚上嚎！{:4_187:} 子元素的运动轨迹和父元素的宽高直接关联，这样的图形也很特别{:4_204:} 红影 发表于 2026-7-22 22:22
子元素的运动轨迹和父元素的宽高直接关联，这样的图形也很特别
就一个矩形，没啥特别 梦江南 发表于 2026-7-22 21:09
黑黑老师的详细讲解，慢慢学习。晚上嚎！
希望能看懂 有趣的CSS相抵路径动画，谢谢马老师详细讲解与示范{:4_190:} 杨帆 发表于 2026-7-23 09:08
有趣的CSS相抵路径动画，谢谢马老师详细讲解与示范
这个对你来说应该是容易的 马黑黑 发表于 2026-7-23 13:02
这个对你来说应该是容易的
谢谢老师~能看懂，主要是您讲的挺好{:4_190:} 杨帆 发表于 2026-7-23 13:29
谢谢老师~能看懂，主要是您讲的挺好
这个不因为讲的如何，原理都在那里，不论怎么讲。关键是在相关领域能入门，入了门只要用心，理解起来就不是问题。 马黑黑 发表于 2026-7-23 13:33
这个不因为讲的如何，原理都在那里，不论怎么讲。关键是在相关领域能入门，入了门只要用心，理解起来就不 ...
是，用心很重要，更得益于学习老师的系列讲座，感恩老师{:4_180:} 杨帆 发表于 2026-7-23 13:39
是，用心很重要，更得益于学习老师的系列讲座，感恩老师
都是交流学习，不存在师生之说 马黑黑 发表于 2026-7-22 22:24
就一个矩形，没啥特别
这样的关联方式还挺特别的。 马黑黑 发表于 2026-7-23 22:07
都是交流学习，不存在师生之说
事实上，有质量的交流学习，总离不开老师的指导{:4_180:} 杨帆 发表于 2026-7-24 12:50
事实上，有质量的交流学习，总离不开老师的指导
教师需要证，俺没证 红影 发表于 2026-7-23 22:48
这样的关联方式还挺特别的。
感觉它特别倒是很特别的 马黑黑 发表于 2026-7-24 18:28
教师需要证，俺没证
呵呵，实至名归，堪比“无冕之王”{:4_199:} 杨帆 发表于 2026-7-24 19:48
呵呵，实至名归，堪比“无冕之王”
这个没用，没证啥也做不了 马黑黑 发表于 2026-7-24 19:49
这个没用，没证啥也做不了
想做什么呢，若真在乎，可以顺便考个呀 杨帆 发表于 2026-7-24 20:05
想做什么呢，若真在乎，可以顺便考个呀
你去问问董路，他要考不考 马黑黑 发表于 2026-7-24 20:09
你去问问董路，他要考不考
网查，董路乃“集大成”者，集多种身份与一身
页:
[1]
2