DigitalOcean 为您的旅程各个阶段提供云产品。从 $200 的免费积分 开始!
此属性最初被称为 motion-rotation
,后来变为 offset-rotation
,现在是 offset-rotate
。它仍然是一个工作草案实验属性,所以 🤷♀️。如果您要使用它,您最好使用最新版本。
CSS 中的 offset-rotate
属性根据元素在 offset-distance
上的 offset-path
沿线的距离来控制元素的角度。
想象一下,沿着路径动画的元素是一辆小赛车。当赛车沿着路径移动时,它需要旋转,使车头朝向移动方向,否则会看起来很奇怪,不自然。值得庆幸的是,offset-path
的默认值为 auto
,它正好能做到这一点。
查看此演示
查看 CodePen 上的
scalextric car on motion-path,作者是 Chris Coyier (@chriscoyier)
在 CodePen 上。
可能的取值
.mover {
offset-rotate: auto; /* default, faces forward */
offset-rotate: reverse; /* faces backward */
offset-rotate: 30deg; /* fixed angle */
offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */
}
浏览器支持
在撰写本文时,offset-*
属性仍然被视为一项实验性功能。如果当前的浏览器支持不足让您犹豫是否要在项目中使用它,那么您可能需要考虑使用 GSAP 来实现此级别的动画。目前,它将为您提供最广泛的浏览器支持。
这些浏览器支持数据来自 Caniuse,该网站提供了更多详细信息。数字表示浏览器在该版本及更高版本上支持该功能。
台式机
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
46 | 72 | 否 | 79 | 16.0 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 16.0 |
从 Chrome 46 和 Opera 33(以及相关的移动版本)开始,Blink 中有了“初始支持”(无标记)。
相关属性
- offset-path
- offset-distance
- offset-position
- offset-anchor
其他信息
- 规范:运动路径模块 1 级规范
- CodePen 上的示例集
- 未来使用:CSS 运动路径,作者是 Dan Wilson
- WebKit 票证 #139128
- Mozilla 票证 #1186329
- Microsoft Edge 功能请求
- Chrome 平台状态:CSS 运动路径 和 示例
- MDN:offset(链接到其他相关属性)