抵消 | offset

偏移量

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

草案

此页未完成。

offsetCSS属性是沿限定的路径动画的元素的缩写属性。

该规范的早期版本称为此属性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)