&nbs p;
一、言左右而顾其他
要让一个元素按照不规则路径进行运动，最好的办法就是使用“ SVG SMIL animation ”，我之前有写过文章专门介绍，参见“超级强大的SVG SMIL animation动画详解”，并且除了IE浏览器以外，其他浏览器的支持情况都蛮不错的，如下截图所示：
“SVG SMIL animation”虽然强大，但是由于是基于 HTML 属性生成的各类效果，因为就容易存在复用的问题，例如不同的位置的不同元素的不规则路径动画是一样的，那么我在设置的时候，要么冗余啰嗦，要么交叉不利于维护，有点早些年在HT ML 标签上写 style 样式的味道。
或许是这个 原因 ，Ch rom e浏览器 开始 有了 放弃 “SVG SMIL animation”的迹象，转而拥抱经过几十年成功验证的 CSS 来实现， offset-path 几乎可以看成是C hr ome浏览器让元素沿着不规则路径运动的新宠儿。
但毕竟是新宠儿，因此，相比较“SVG SMIL animation”，其兼容性还是差了两条街的。
但是有一些内部的项目只需要兼容浏览器，因此，实际上 offset-path 也是有用武之地的。
二、offset-path之前并不叫做offset-path
offset-path 属性一开始的时候并不叫做 offset-path ，而叫做 motion-path ，这是因为开始有规范对其进行 明确 定义了，如下截图示意：
其实不止 motion-path ，还有其他 motion-* 属性也都开始变成 offset-* 开头的了，例如 原来 的 motion-offset 现在规范用法是 offset-distance 。
根据一些资料的说法，之前语法开始于2015年9月，会在M58版本会移除，大约2017年4月，也就是说，等到下个月 motion-path 这些属性Chrome就会不念旧情，残忍抛弃。为了避免发生如此惨绝人寰的事情，所以从现在开始，我们都开始使用新的规范的属性名称。
不过 本文的demo实例还是新老语法一起混用的，因为demo的主要目的是演示，不代表实际的应用，所以大家大可不必在意这个 细节 。
三、offset-path让元素沿着不规则路径运动
使用 CSS属性 让元素不规则运动要比使用HTML属性控制 简单 得多，比方说我们只需要下面几行CSS，就可以实现我们想要的效果了，例如：
.horse-run { offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0"); animation: move 3s linear infin IT e; } @keyfr am es move { 100% { offset-distance: 100%;} } 就可以实现一个马儿沿着不规则路径不停跑的效果。您可以狠狠地点击这里：CSS offset-path实现的马儿不规则路径不停跑demo
其中用到了两个CSS属性，一个是 offset-path ，表示运动的路径，另外一个则是 offset-distance ，我是运动的 距离 ，可以是数值 或者 百分比单位，如果是 100% 则表示正好把所有的路都跑完了。
四、其他offset-*运动相关属性值
除了 offset-path 和 offset-distance 这两个CSS属性，还有其他一些相关的属性，例如 offset-rotation （规范上显示的是 offset-rotate ，浏览器是无效不识别的），表示运动的角度，默认是 auto ，表示自动计算当前路径的切线 方向 ，并朝着这个方向前进，所以，上面的马儿会有会自动爬坡的即视感。
但是如果我们定死了一个角度，例如设置：
offset-rotation: 30 deg
则这个马儿一看就 知道 昨晚没睡好，得了落枕，头抬不起来只能保持一个姿势：
除了设定固定的角度值，我们还可以使用关键字属性值，例如：
offset-rotation: rev erse;
则马儿立马上下颠倒跑起来，如下截图：
我们甚至可以把属性值组合起来，例如：
offset-rotation: auto 30deg;
表示在原来的切线方向上，再旋转30度，例如，之前值为 auto 的时候，马儿在平地上是朝前看的，现在则是看自己的蹄子美不美：
除了 offset-rotation ，还有其他相关CSS属性，包括 offset-position 和 offset-anchor 。
其中， offset-anchor 表示 锚 定的中心点，其属性值和 transform-ori gin 类似，可以是：
# item1 { offset-anchor: right top; } #item2 { offset-anchor: right bottom; } #item3 { offset-anchor: left bottom; } #item4 { offset-anchor: left top; } #item5 { offset-anchor: center ; } .. . 等等 ，元素运动的时候，会让这个点和路径重合进行运动。。
offset-position 指定路径的初始位置，行为类似于属性 background-position 。
根据我的测试，Chrome浏览器虽然认得 offset-position 和 offset-anchor 这两个属性，但是马儿并没有任何的变化，哪怕有一像素的位移或者旋转之类的。可能是我使用的方式不对，所以只能从规范的示例上挖掘这两个属性的表现：
已知四个元素 offset-position 值分别是：
offset-position: 90% 20%; offset-position: 100% 100%; offset-position: 50% 100%; offset-position: 0% 100%;
当 offset-anchor 值为 center 的时候，表现如下图（SVG图，IE9+）：
上图中的加号表示的就是 offset-anchor 确定的锚点位置。
当 offset-anchor 值为 auto 的时候，则表现就跟CSS2.1中 background-position 属性的百分比解析一模一样了：
图片示意的很清楚，还是很好理解的。如果按照上面两张规范图所示的表现的话，浏览器是 应该 有所表现才对，我猜测很有可能，浏览器还没有对其进行完全的解析，毕竟规范也才更新不久。
五、结束语
个人站点的新版首页上线啦！点击这里围观。
花了2周时间对进行了大刀阔斧的修改，增加了“好文推荐”和“我的微码”以及“工作 机会 ”这几个模块，并对 内页 进行了无图片改造，去除几个以前学习目的开发的几个频道等，评论采用了社会化的评论，以前是自己开发的，需要注册才 能评 论，我自己都 觉得 麻烦。
有小伙伴说，终于进来不全是广告了，
我 老婆 问我为什么 不用 黑色底，显得很酷，很有设计感。唉，现在风格已经成型，网站基色已经应用这么久，哪是随便改的了的。说起来怪自己 当年 自由奔放的性格，网站不都是需要一个主色吗？ 当时 我还是 xp系统 ，我就用取色工具在我当时 xp 系统的工具栏上随便取了个色作为了网站的主色，这个颜色就是 #34538b ，早就记得滚瓜烂熟，然后用配色工具配了个色，结果现在的眼光看那几个颜色，咳咳…… 实际上，大家现在看到的上面导航栏的颜色已经不是当年配色表显示的颜色了，现在流行高饱和度大色块。算是顺应时势，在几年前我悄悄改了几个主色， 提高 了明度和饱和度，之前的颜色灰蒙蒙的，感觉有点脏，虽然现在也好不到哪里去，但比起之前的至少上了一层楼了。
欢迎反馈使用上的问题，我会慢慢优化，并用数据说话！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-使用CSS offset-path让元素沿着不规则路径运动 全部内容，希望文章能够帮你解决 html5教程-使用CSS offset-path让元素沿着不规则路径运动 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-使用CSS offset-path让元素沿着不规则路径运动的详细内容...