Définissez le type sur un cercle ... avec chemin de décalage

Voici une rotation CSS légitime de Yuanchuan. Il y a ce chemin de décalage de la propriété CSS. Il était une fois, il s'appelait le chemin de mouvement, puis il a été renommé. J'ai en quelque sorte roulé des yeux à l'époque, car la propriété est si évidemment pour animer les choses le long d'un chemin. Mais vous n'avez pas à l'utiliser pour l'animation, d'où le renommée, et cet exemple le prouve!

La chose avec la définition d'éléments sur un chemin, c'est que l'élément entier est placé sur ce chemin. Donc, si cet élément est, disons, chris , tout le mot est placé en un seul point sur le chemin. L'astuce de Yuanchuan consiste à diviser la chaîne en lettres-as-spans, puis à placer chaque portée le long du chemin (avec une distance de décalage différente).

Il y a un chemin haut de gamme appliqué à chaque portée:

 PATH OFFSET: PATH («M 0 200 A 200 200 0 0 1 1 400 200»)

Ensuite, il y a des mathématiques de danse fantaisie (plutôt spécifiques à cette démo, bien sûr) pour calculer les distances appropriées pour chaque lettre:

 Discassement: calc (8% var (- n) * 89,5% / var (- total));

La beauté est que chaque portée a sa propre propriété personnalisée qui affecte le calcul. Aucun Big-Chunk of: Ndth-Child Repetitive CSS n'est nécessaire.

 <div style="- Total: 14;">
  <span style="- n: 0"> c </span>
  <span style="- n: 1"> s </span>
  <span style="- n: 2"> s </span>
  <p> Et ce n'est pas seulement pour les lettres! C'est bon pour toutes sortes de choses!</p>
<p> <strong>Notes connexes:</strong></p>
<ul>
<li> C'est bien plus propre qu'une ancienne méthode que nous avons bloguée où chaque portée devait utiliser la transformation: rotate () avec un point d'origine transformateur commun éloigné de la lettre elle-même.</li>
<li> SVG gère cela sans piratage. (Ce n'est pas totalement un piratage, mais comme vous devez vous séparer en portées, vous avez au moins besoin de marquer le parent, ce qui le fait se sentir hackier.)</li>
<li> Nitpick (je suis le pire): ne vous contentez pas de balises HTML comme ce stylo de démonstration sur des sites non-démo que les gens doivent utiliser.</li>
</ul>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!