要让一个元素按照不规则路径进行运动,最好的办法就是使用 "SVG SMIL animation",我之前有写过文章专门介绍,参见 " ",并且除了 IE 浏览器以外,其他浏览器的支持情况都蛮不错的,如下截图所示:
或许是这个原因,Chrome 浏览器开始有了放弃 "SVG SMIL animation" 的迹象,转而拥抱经过几十年成功验证的 CSS 来实现,
几乎可以看成是 Chrome 浏览器让元素沿着不规则路径运动的新宠儿。
- offset-path
但毕竟是新宠儿,因此,相比较 "SVG SMIL animation",其兼容性还是差了两条街的。
但是有一些内部的项目只需要兼容浏览器,因此,实际上
也是有用武之地的。
- offset-path
属性一开始的时候并不叫做
- offset-path
,而叫做
- offset-path
,这是因为开始有规范对其进行明确定义了,如下截图示意:
- motion-path
其实不止
,还有其他
- motion-path
属性也都开始变成
- motion-*
开头的了,例如原来的
- offset-*
现在规范用法是
- motion-offset
。
- offset-distance
根据一些资料的说法,之前语法开始于 2015 年 9 月,会在 M58 版本会移除,大约 2017 年 4 月,也就是说,等到下个月
这些属性 Chrome 就会不念旧情,残忍抛弃。为了避免发生如此惨绝人寰的事情,所以从现在开始,我们都开始使用新的规范的属性名称。
- motion-path
不过本文的 demo 实例还是新老语法一起混用的,因为 demo 的主要目的是演示,不代表实际的应用,所以大家大可不必在意这个细节。
使用 CSS 属性让元素不规则运动要比使用 html 属性控制简单得多,比方说我们只需要下面几行 CSS,就可以实现我们想要的效果了,例如:
- .horse - run {
- offset - path: path("M10,80 q100,120 120,20 q140,-50 160,0");
- animation: move 3s linear infinite;
- }@keyframes move {
- 100 % {
- offset - distance: 100 % ;
- }
- }
就可以实现一个马儿沿着不规则路径不停跑的效果。您可以狠狠地点击这里:
其中用到了两个 CSS 属性,一个是
,表示运动的路径,另外一个则是
- offset-path
,我是运动的距离,可以是数值或者百分比单位,如果是
- offset-distance
则表示正好把所有的路都跑完了。
- 100%
除了
和
- offset-path
这两个 CSS 属性,还有其他一些相关的属性,例如
- offset-distance
(规范上显示的是
- offset-rotation
,浏览器是无效不识别的),表示运动的角度,默认是
- offset-rotate
,表示自动计算当前路径的切线方向,并朝着这个方向前进,所以,上面的马儿会有会自动爬坡的即视感。
- auto
但是如果我们定死了一个角度,例如设置:
- offset-rotation: 30deg
则这个马儿一看就知道昨晚没睡好,得了落枕,头抬不起来只能保持一个姿势:
除了设定固定的角度值,我们还可以使用关键字属性值,例如:
- offset-rotation: reverse;
则马儿立马上下颠倒跑起来,如下截图:
我们甚至可以把属性值组合起来,例如:
- offset-rotation: auto 30deg;
表示在原来的切线方向上,再旋转 30 度,例如,之前值为
的时候,马儿在平地上是朝前看的,现在则是看自己的蹄子美不美:
- auto
除了
,还有其他相关 CSS 属性,包括
- offset-rotation
和
- offset-position
。
- offset-anchor
其中,
表示锚定的中心点,其属性值和
- offset-anchor
类似,可以是:
- transform-origin
- #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
的时候,表现如下图(SVG 图,IE9+):
- center
上图中的加号表示的就是
确定的锚点位置。
- offset-anchor
当
值为
- offset-anchor
的时候,则表现就跟 CSS2.1 中
- auto
属性的百分比解析一模一样了:
- background-position
图片示意的很清楚,还是很好理解的。如果按照上面两张规范图所示的表现的话,浏览器是应该有所表现才对,我猜测很有可能,浏览器还没有对其进行完全的解析,毕竟规范也才更新不久。
个人站点的新版首页上线啦!点击这里围观。
花了 2 周时间对进行了大刀阔斧的修改,增加了 "好文推荐" 和 "我的微码" 以及 "工作机会" 这几个模块,并对内页进行了无图片改造,去除几个以前学习目的开发的几个频道等,评论采用了社会化的评论,以前是自己开发的,需要注册才能评论,我自己都觉得麻烦。
有小伙伴说,终于进来不全是广告了,
我老婆问我为什么不用黑色底,显得很酷,很有设计感。唉,现在风格已经成型,网站基色已经应用这么久,哪是随便改的了的。说起来怪自己当年自由奔放的性格,网站不都是需要一个主色吗?当时我还是 xp 系统,我就用取色工具在我当时 xp 系统的工具栏上随便取了个色作为了网站的主色,这个颜色就是
,早就记得滚瓜烂熟,然后用配色工具配了个色,结果现在的眼光看那几个颜色,咳咳…… 实际上,大家现在看到的上面导航栏的颜色已经不是当年配色表显示的颜色了,现在流行高饱和度大色块。算是顺应时势,在几年前我悄悄改了几个主色,提高了明度和饱和度,之前的颜色灰蒙蒙的,感觉有点脏,虽然现在也好不到哪里去,但比起之前的至少上了一层楼了。
- #34538b
欢迎反馈使用上的问题,我会慢慢优化,并用数据说话!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:
(本篇完)
来源: http://www.tuicool.com/articles/u6Jb2ij