CSS：offset-path动画制作解析

马黑黑 · 发表于 2022-10-22 09:26

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-4-16 08:32 编辑

CSS可以使用 offset-path 制作 animation 动画，offset-path 属性用于定义动画的svg路线，语句如下：

offset-path: path('M196 223.5a192.5 136.5 0 1 0 385 0a192.5 136.5 0 1 0 -385 0z');

path 引导路径，路径当是标准的 svg 路径，用小角引号包裹起来并放在小角小括弧里。上例是一个椭圆闭合路径。路径可以是任意的合法的 svg 路径，可以是闭合路径，也可以是不闭合的路径。路径可以利用在线工具生成，能自己编写路径更好。有了路径，还需设定 offset-distance 初始偏移位置，一般用百分比表示：

offset-distance: 100%;

这表明，运动对象偏移到路径的100%处。然后，制定关键帧动画，回到 100% 的对立位置 0%：

to { offset-distance: 0%; }

当然也可以从 0% 偏移到 100%，这根据需要来设定。下面我们来看看一个实例的完整的代码：

<style>
.mtBox {
   margin: auto;
   width: 740px;
   height: 460px;
   position: relative;
}
.fish {
   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>

运动对象就是 .fish 盒子所指向的图片标签，它做了绝对定位，这个强烈建议，这样就可以通过 left、top 等设定物理定位后改变运动对象的运动区域。这源于：svg路径是固定的，但有时我们需要调整运动对象的运动区域，absolute + left + top 就能派上用场，大家可以根据实例自己做尝试、体会。

CSS使用 offset-path 无需显示svg路径，也就是，不必要写出 svg 及其路径标签，但本例，为了让大家对比运动与 svg 路径的关系，HTML代码附带了svg标签，其内的 path 标签的 d 路径与CSS的 offset-path 完全一样：

<div class="mtBox">
   <img class="fish" 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" />
   </svg>
</div>