offset-anchor

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

offset-anchor CSS property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path.

句法

/* Keyword values */
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;
/* <percentage> values */
offset-anchor: 25% 75%;
/* <length> values */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;
/* Edge offsets values */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;
/* Global values */
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: unset;

值

auto: offset-anchor is given the same value as the element's transform-origin , unless offset-path is none , in which case it takes its value from offset-position .
<position>: A <position> defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. For more specifics, see the <position> and background-position reference pages. Note that the 3-value position syntax does not work for any usage of <position> , except for in background(-position) .

形式定义

初始值	`auto`
适用于	transformable elements
继承	no
百分比	relativeToWidthAndHeight
计算值	for `<length>` the absolute value, otherwise a percentage
动画类型	a position

形式句法

auto | <position>where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

范例

Setting various offset-anchor values

In the following example, we have three <div> elements nested in <section> elements. Each <div> is given the same offset-path (a horizontal line 200 pixels long) and animated to move along it. The three are then given different background-color and offset-anchor values.

每个 <section> has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the <div> 's offset paths are running.

This allows you to see what effect the different offset-anchor values have — the first one, auto , causes the <div> 's center point to move along the path. The other two cause the <div> 's top-right and bottom-left points to move along the path, respectively.

HTML

<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>

CSS

div {
  offset-path: path('M 0,20 L 200,20');
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}
section {
  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}
.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}
.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

结果

规范

规范	状态	注释
Motion Path Module Level 1 The definition of 'offset-anchor' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`offset-anchor`	Chrome 完整支持 79	Edge 完整支持 79	Firefox 完整支持 72 完整支持 72 不支持 70 — 72 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 完整支持 79	Chrome Android 完整支持 79	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 完整支持 12.0

图例

完整支持
不支持
用户必须明确启用此特征。

另请参阅

元数据

最后修改： Jul 20, 2020

CSS
CSS 参考
CSS Motion Path
特性
1. offset
2. offset-anchor
3. offset-distance
4. offset-path
5. offset-position
6. offset-rotate

在此页

句法

值