将类型设置在圆上...带偏移路径

这是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中文网其他相关文章！