円にタイプを設定します...オフセットパス付き

これは、Yuanchuanからの合法的なCSSの策略です。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。当時、私は目を転がしました。なぜなら、プロパティは明らかに道に沿って物事をアニメーション化するためです。しかし、アニメーションに使用する必要はないため、名前が変更されているため、この例ではそれが証明されています！

ただし、パスに要素を設定することは、要素全体がそのパスに登場していることです。したがって、その要素が、たとえば chris である場合、その単語全体がパス上の単一のポイントに配置されます。 Yuanchuanのトリックは、文字列をスパンとして文字に分割し、各スパンをパスに沿って（異なるオフセット距離で）配置することです。

各スパンに適用される最大の円のパスがあります。

オフセットパス：パス（ 'M 0 200 A 200 200 0 0 1 400 200'）

次に、各文字の適切な距離を計算するために、いくつかの派手なダンスの数学（もちろん、このデモに固有）があります。

 offset-distance：calc（8％var（ -  n） * 89.5％ / var（ - 合計））;

美しさは、各スパンには計算に影響する独自のカスタムプロパティがあるということです。大チャンクはありません：nth-​​childの反復CSSは必要ありません。

 <div style=" - 合計：14;">
  <span style="-n：0"> c </span>
  <span style="-n：1"> s </span>
  <span style="-n：2"> s </span>
  <p>そして、それは文字だけではありません！それはあらゆる種類のものに良いです！</p>
<p><strong>関連メモ：</strong></p>
<ul>
<li>これは、各スパンを使用しなければならない古い方法よりもはるかにクリーンです：Rotate（）は、文字自体から離れた一般的な変換オリジンポイントを使用しています。</li>
<li> SVGは、ハッカーなしでこれを処理します。 （これは完全にハッキングではありませんが、スパンに分割する必要があるため、少なくとも親をアリアに覆う必要があります。</li>
<li> nitpick（私は最悪です）：人々が使用する必要がある非デモサイトでこのデモペンのようなHTMLタグを作成しないでください。</li>
</ul>
</div>

以上が円にタイプを設定します...オフセットパス付きの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。