试一试
offset-anchor: auto;
offset-anchor: right top;
offset-anchor: left bottom;
offset-anchor: 20% 80%;
<section class="default-example" id="default-example">
<div class="wrapper">
<div id="example-element"></div>
</div>
<button id="playback" type="button">Play</button>
</section>
#example-element {
offset-path: path("M 0,20 L 200,20");
animation: distance 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
animation-play-state: paused;
}
#example-element.running {
animation-play-state: running;
}
.wrapper {
background-image: linear-gradient(
to bottom,
transparent,
transparent 49%,
black 50%,
black 51%,
transparent 52%
);
border: 1px solid #cccccc;
width: 90%;
}
@keyframes distance {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
#playback {
position: absolute;
top: 0;
left: 0;
font-size: 1em;
}
const example = document.getElementById("example-element");
const button = document.getElementById("playback");
button.addEventListener("click", () => {
if (example.classList.contains("running")) {
example.classList.remove("running");
button.textContent = "Play";
} else {
example.classList.add("running");
button.textContent = "Pause";
}
});
语法
css
/* 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: revert;
offset-anchor: revert-layer;
offset-anchor: unset;
值
auto-
offset-anchor的值与元素的transform-origin相同，除非offset-path为none，在这种情况下它会从offset-position获取值。 <position>-
<position>定义了一个 x/y 坐标，用于将项目相对于元素框的边缘放置。它可以由一到四个值定义。有关更多详细信息，请参阅<position>和background-position参考页面。请注意，3 值位置语法不适用于任何<position>的用法，除了background(-position)中。
正式定义
正式语法
offset-anchor =
auto |
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
示例
设置不同的 offset-anchor 值
在以下示例中，我们有三个嵌套在 <section> 元素中的 <div> 元素。每个 <div> 都被赋予相同的 offset-path（一条 200 像素长的水平线），并被动画化以沿其移动。然后，这三个被赋予不同的 background-color 和 offset-anchor 值。
每个 <section> 都用线性渐变进行了样式设置，以在其中心显示一条水平线，从而直观地显示 <div> 的偏移路径在哪里运行。
这使您可以查看不同 offset-anchor 值的影响——第一个，auto，导致 <div> 的中心点沿路径移动。另外两个分别导致 <div> 的右上角和左下角点沿路径移动。
HTML
html
<section>
<div class="offset-anchor1"></div>
</section>
<section>
<div class="offset-anchor2"></div>
</section>
<section>
<div class="offset-anchor3"></div>
</section>
CSS
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%,
black 50%,
black 51%,
transparent 52%
);
border: 1px solid #cccccc;
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 # offset-anchor-property |
浏览器兼容性
加载中…