在圆圈上设置类型... 使用 offset-path

这是来自 yuanchuan 的一些真正有用的 CSS 技巧。存在一个 CSS 属性 offset-path。曾经它被称为 motion-path，然后被重命名。我当时有点翻白眼，因为这个属性显然是为了沿着路径动画化东西。但是你并不必须用它来动画化，因此进行了重命名，而这个例子证明了这一点！

虽然将元素设置在路径上的问题在于，整个元素都被放置在该路径上。因此，如果该元素是，例如，<span>Chris</span>，那么整个单词将被放置在路径上的一个点上。 yuanchuan 的技巧是将字符串分解成字母作为跨度，然后将每个跨度放置在路径上（使用不同的 offset-distance）。

每个跨度都应用了圆圈顶部路径

offset-path: path('M 0 200 A 200 200 0 0 1 400 200')

然后是一些花哨的舞蹈数学（当然，这对于这个演示来说是相当具体的）来计算每个字母的适当距离

offset-distance: calc(8% + var(--n) * 89.5% / var(--total));

美妙之处在于，每个跨度都有自己的自定义属性，它会影响计算。不需要大块的 -:nth-child 重复 CSS。

<div style="--total:14;">
  <span style="--n:0">C</span>
  <span style="--n:1">S</span>
  <span style="--n:2">S</span>
  <!-- ... -->

而且它不仅仅适用于字母！它适用于各种各样的东西！

相关笔记

这比我们博客中的一种旧方法要干净得多，在该方法中，每个跨度都必须使用 transform: rotate()，并且有一个公共的 transform-origin 点设置在远离字母本身的位置。
SVG 处理这种情况，没有任何黑客行为。（这并不完全是黑客行为，但由于你必须拆分成跨度，因此至少需要为父级设置 aria-label，这会使其感觉更像黑客行为。）
吹毛求疵（我是最差的）：不要像这个演示笔一样在人们需要使用的非演示站点上编造 HTML 标签。

评论