CSS：offset-path动画制作解析
本帖最后由 马黑黑 于 2023-4-16 08:32 编辑 <br /><br /><style>#papa { width: 100%; }
#papa > p { padding: 8px 0; }
.mtBox { margin: auto; width: 740px; height: 460px; position: relative; }
.fish22 { position: absolute; offset-path: path('M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z'); offset-distance: 100%; animation: swim 20s infinite; }
@keyframes swim { to { offset-distance: 0%; } }
</style>
<div id="papa">
<p>CSS可以使用 offset-path 制作 animation 动画，offset-path 属性用于定义动画的svg路线，语句如下：</p>
<p>offset-path: path('M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z');</p>
<p>path 引导路径，路径当是标准的 svg 路径，用小角引号包裹起来并放在小角小括弧里。上例是一个椭圆闭合路径。路径可以是任意的合法的 svg 路径，可以是闭合路径，也可以是不闭合的路径。路径可以利用在线工具生成，能自己编写路径更好。有了路径，还需设定 offset-distance 初始偏移位置，一般用百分比表示：</p>
<p>offset-distance: 100%;</p>
<p>这表明，运动对象偏移到路径的100%处。然后，制定关键帧动画，回到 100% 的对立位置 0%：</p>
<p>to { offset-distance: 0%; } </p>
<p>当然也可以从 0% 偏移到 100%，这根据需要来设定。下面我们来看看一个实例的完整的代码：</p>
<pre><style>
<span style="color: red;">.mtBox </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 740px;
<span style="color: blue;">height</span>: 460px;
<span style="color: blue;">position</span>: relative;
}
<span style="color: red;">.fish </span>{
<span style="color: blue;">position</span>: absolute;
<span style="color: blue;">offset-path</span>: path(<span style="color: magenta">'M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z'</span>);
<span style="color: blue;">offset-distance</span>: 100%;
<span style="color: blue;">animation</span>: swim 20s infinite;
}
<span style="color: red;">@keyframes swim </span>{
to { <span style="color: blue;">offset-distance</span>: 0%; }
}
</style>
</pre>
<p>运动对象就是 .fish 盒子所指向的图片标签，它做了绝对定位，这个强烈建议，这样就可以通过 left、top 等设定物理定位后改变运动对象的运动区域。这源于：svg路径是固定的，但有时我们需要调整运动对象的运动区域，absolute + left + top 就能派上用场，大家可以根据实例自己做尝试、体会。</p>
<p>CSS使用 offset-path 无需显示svg路径，也就是，不必要写出 svg 及其路径标签，但本例，为了让大家对比运动与 svg 路径的关系，HTML代码附带了svg标签，其内的 path 标签 的 d 路径与CSS的 offset-path 完全一样：</p>
<pre><<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"mtBox"</span>>
<<span style="color:darkred">img</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"fish"</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://wj1.zp68.com:812/lxx/yunhua/2022/10/02/gnyu.jpg"</span> alt="" />
<<span style="color:darkred">svg</span> <span style="color: red">width</span><span style="color: blue">=</span><span style="color: magenta">"100%"</span> <span style="color: red">height</span><span style="color: blue">=</span><span style="color: magenta">"100%"</span> <span style="color: red">style</span><span style="color: blue">=</span><span style="color: magenta">"position: absolute; left: 0; top: 0; border:1px solid #111;"</span>>
<<span style="color:darkred">path</span> <span style="color: red">d</span><span style="color: blue">=</span><span style="color: magenta">"M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z"</span> <span style="color: red">fill</span><span style="color: blue">=</span><span style="color: magenta">"none"</span> <span style="color: red">stroke</span><span style="color: blue">=</span><span style="color: magenta">"red"</span> />
<<span style="color: darkred">/svg</span>>
<<span style="color: darkred">/div</span>>
</pre>
<p>svg使用了 style 属性将其设定为与帖子父框重合，这样它的路径才能与 CSS 设定的 offset-path 路径贴合。演示效果：</p>
<p></p>
<div class="mtBox">
<img class="fish22" src="https://wj1.zp68.com:812/lxx/yunhua/2022/10/02/gnyu.jpg" alt="">
<svg width="100%" height="100%" style="position: absolute; left: 0; top: 0; border:1px solid #111;">
<path d="M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z" fill="none" stroke="red"></path>
</svg>
</div>
</div> offset-path 还有一些细节设定，比如 offset-anchor，用于确定运动对象的锚点位置，就是运动对象在线上、线内、线外游动的位置，不过貌似没啥必要，因为我们根本就不想要路径显示出来。 这个又要用到路径，感觉是我的弱项，但动画又是很想学习的 小辣椒 发表于 2022-10-22 09:52
这个又要用到路径，感觉是我的弱项，但动画又是很想学习的
这里讲的很浅易的，好好消化一下 学习{:4_187:} 红影 发表于 2022-10-23 20:55
学习
这是复习吧 马黑黑 发表于 2022-10-23 21:04
这是复习吧
嗯嗯，你讲过的{:4_173:} 红影 发表于 2022-10-24 16:58
嗯嗯，你讲过的
{:4_181:}
页:
[1]