試一試
offset-distance: 0%;
offset-distance: 80%;
offset-distance: 50px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
width: 24px;
height: 24px;
background: #2bc4a2;
offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}
/* Provides a reference image of what path the element is following */
#default-example {
background-position: calc(50% - 12px) calc(50% + 14px);
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}
語法
css
/* Default value */
offset-distance: 0;
/* the middle of the offset-path */
offset-distance: 50%;
/* a fixed length positioned along the path */
offset-distance: 40px;
/* Global values */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;
<length-percentage>-
一個長度值，指定元素沿路徑（由
offset-path定義）的距離。100% 表示路徑的總長度（當
offset-path被定義為基本形狀或path()時）。
正式定義
正式語法
offset-distance =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
在動畫中使用 offset-distance
CSS 運動路徑中的運動方面通常來自對 offset-distance 屬性的動畫。如果你想讓一個元素沿其完整路徑進行動畫，你可以定義它的 offset-path，然後設定一個將 offset-distance 從 0% 動畫到 100% 的動畫。
HTML
html
<div id="motion-demo"></div>
CSS
css
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
結果
規範
| 規範 |
|---|
| Motion Path Module Level 1 # offset-distance 屬性 |
瀏覽器相容性
載入中…