diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
| commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
| tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/css/偏移/index.html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip | |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/css/偏移/index.html')
| -rw-r--r-- | files/zh-cn/web/css/偏移/index.html | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/files/zh-cn/web/css/偏移/index.html b/files/zh-cn/web/css/偏移/index.html deleted file mode 100644 index e61a0ffd7a..0000000000 --- a/files/zh-cn/web/css/偏移/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: offset -slug: Web/CSS/偏移 -translation_of: Web/CSS/offset ---- -<div>{{SeeCompatTable}}{{CSSRef}}{{draft}}</div> - -<p>这个 <strong><code>offset</code></strong> 是CSS属性的快速属性动画元素沿着定义的路径。</p> - -<div class="note"> -<p>早期版本 规格 属性叫做 <code>motion</code>.</p> -</div> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css">/* 偏移位置 */ -offset: auto -offset: 10px 30px; -offset: none; - -/* 偏移路径 */ -offset: ray(45deg closest-side); -offset: path(M 100 100 L 300 100 L 200 300 z); -offset: url(arc.svg); - -/* 偏移路径的距离和/或旋转 */ -offset: url(circle.svg) 100px; -offset: url(circle.svg) 40%; -offset: url(circle.svg) 30deg; -offset: url(circle.svg) 50px 20deg; - -/* 包括锚偏移 */ -offset: ray(45deg closest-side) / 40px 20px; -offset: url(arc.svg) 2cm / 0.5cm 3cm; -offset: url(arc.svg) 30deg / 50px 100px; -</pre> - -<h3 id="语法形式">语法形式</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="举例">举例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="offsetElement"></div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: 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; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Example", 350, 350)}}</p> - -<h2 id="规格">规格</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>规格</th> - <th>使用状态</th> - <th>注释</th> - </tr> - <tr> - <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td> - <td>{{Spec2('Motion Path Level 1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>该兼容性表生成从该网页的结构化数据。如果你愿意，请查看https://github.com/mdn/browser-compat-数据，并发送一个引入请求。</p> - -<p>{{Compat("css.properties.offset")}}</p> |