CSS参考手册
运动路径 | Motion Path
抵消 | offset
这是一种实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
草案
此页未完成。
offset
CSS属性是沿限定的路径动画的元素的缩写属性。
该规范的早期版本称为此属性motion
。
初始值 |
作为速记的每个属性:offset-position:auto offset-path:none offset-distance:0 offset-anchor:auto offset-rotate:auto |
---|---|
适用于 |
可变形的元素 |
遗传 |
没有 |
百分比 |
作为速记的每个属性:offset-position:referToSizeOfContainingBlock offset-distance:指总路径长度offset-anchor:relativeToWidthAndHeight |
媒体 |
视觉 |
计算值 |
作为速记的每个属性:offset-position:for <length>的绝对值,否则为百分比offset-path:为指定offset-distance:为<length>的绝对值,否则为百分比offset-anchor:for <长度>绝对值,否则按照指定偏移量旋转百分比 |
动画类型 |
作为速记的每个属性:offset-position:位置offset-path:如<angle>,<basic-shape>或者<path()> offset-distance:长度,百分比或者calc(); offset-anchor:一个位置offset-rotate:角度 |
规范的顺序 |
逐个语法 |
创建堆叠上下文 |
是 |
-
offset-position
*auto
-
offset-path
*none
-
offset-distance
*0
-
offset-anchor
*auto
-
offset-rotate
*auto
Applies to transformable elements [Inherited](inheritance) no Percentages as each of the properties of the shorthand:
-
offset-position
::转交ToSizeOfContainingBlock
-
offset-distance
::参考路径的总长度。
-
offset-anchor
*相对人
Media visual [Computed value](computed_value) as each of the properties of the shorthand:
-
offset-position
*为<length>
绝对值,否则为百分比。
-
offset-path
*具体规定
-
offset-distance
*为<length>
绝对值,否则为百分比。
-
offset-anchor
*为<length>
绝对值,否则为百分比。
-
offset-rotate
*具体规定
Animation type as each of the properties of the shorthand:
-
offset-position
*a位置
-
offset-path
*AS<angle>,,,<basic-shape>或<路径%28%29>
-
offset-distance
*a长度,,,百分比或calc%28%29;
-
offset-anchor
*a位置
-
offset-rotate
*角度
Canonical order per grammar Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) yes
语法
/* Offset position */
offset: auto
offset: 10px 30px;
offset: none;
/* Offset path */
offset: ray(45deg closest-side);
offset: path(M 100 100 L 300 100 L 200 300 z);
offset: url(arc.svg);
/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;
/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
形式语法
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
例子
HTML
<div id="offsetElement"></div>
CSS
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
#offsetElement {
width: 50px;
height: 50px;
background-color: blue;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 3s linear infinite;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
Motion Path Module Level 1The definition of 'offset' in that specification. |
Working Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
46.0 (as motion) 55.0 (as offset) |
No support |
No support |
No support |
No support |
Feature |
Android |
Android Webview |
Firefox Mobile (Gecko) |
Firefox OS |
IE Mobile |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support |
No support |
46.0 (as motion) 55.0 (as offset) |
No support |
No support |
No support |
No support |
No support |
46.0 (as motion) 55.0 (as offset) |
运动路径 | Motion Path相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。