試一試
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 |
瀏覽器相容性
載入中…