將類型設置在圓上...帶偏移路徑

這是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。當時我有點翻了個白眼，因為該屬性顯然是為了使事物沿著一條路徑動畫。但是您不必將其用於動畫，因此重命名，此示例證明了這一點！

但是，將元素設置在路徑上的事情是，整個元素都插在該路徑上。因此，如果該元素是 chris ，則將整個單詞放在路徑上的一個點上。 Yuanchuan的訣竅是將字符串分解為字母，然後將每個跨度放在路徑上（帶有不同的偏移距離）。

每個跨度都有一條圓環路徑：

偏移路徑：路徑（'M 0 200 A 200 200 0 0 0 1 400 200'）

然後，有一些花哨的數學（當然是該演示的特定於此）可以計算每個字母的適當距離：

偏移距離：calc（8％var（-n） * 89.5％ / var（ - 總））;

美麗是每個跨度都有自己的自定義屬性影響計算。不需要大塊：nth-​​Child重複的CSS。

 <div style="“">
  <span style="“" n> c </span>
  <span style="“" n> s </span>
  <span style="“" n> s </span>
  <p>這不僅僅是字母！這對各種各樣的東西都很好！</p>
<p><strong>相關註釋：</strong></p>
<ul>
<li>這比我們博客的舊方法更清潔，每個跨度都必須使用transform：rotate（），帶有一個常見的轉換 - 原始點，從字母本身遠離字母。</li>
<li> SVG無需黑客處理這個問題。 （這並不是完全駭客，但是由於您必須分成跨度，因此您至少需要為父母標記，這會使它感覺更黑。）</li>
<li> nitpick（我是最糟糕的）：不僅可以在人們需要使用的非demo網站上像此演示筆這樣的html標籤。</li>
</ul>
</div>

以上是將類型設置在圓上...帶偏移路徑的詳細內容。更多資訊請關注PHP中文網其他相關文章！