Geben Sie den Typ auf einen Kreis ein ... mit Offset-Pfad

Hier ist ein legitimer CSS -Trick von Yuanchuan. Es gibt diesen CSS-Immobilien-Offset-Pfad. Es war einmal, es wurde als Bewegungspfad bezeichnet und dann umbenannt. Ich habe zu der Zeit irgendwie meine Augen gerollt, weil die Eigenschaft so offensichtlich die Dinge auf einem Weg animiert. Aber Sie müssen es nicht zur Animation verwenden, daher die Umbenennung, und dieses Beispiel beweist es!

Die Sache beim Einstellen von Elementen auf einem Pfad ist jedoch, dass das gesamte Element auf diesen Weg geplagt ist. Wenn dieses Element beispielsweise Chris ist, wird das gesamte Wort an einem einzigen Punkt auf dem Pfad platziert. Yuanchuans Trick besteht darin, die Zeichenfolge in Buchstaben wie Spans zu zerlegen und dann jede Spannweite entlang des Pfades zu platzieren (mit einer anderen Offset-Distanz).

Für jede Spannweite wird ein Top-of-Circle-Pfad angewendet:

 Offset-Pfad: Pfad ('M 0 200 A 200 200 0 0 1 400 200')

Dann gibt es eine ausgefallene Mathematik (natürlich für diese Demo eher spezifisch), um die geeigneten Entfernungen für jeden Buchstaben zu berechnen:

 Offset-Distanz: Calc (8% var (-n) * 89,5% / var (-Gesamt));

Die Schönheit ist, dass jede Spannweite eine eigene Eigenschaft hat, die die Berechnung beeinflusst. Es ist kein Big Chunk-of-: N-Child-Wiederholungs-CSS erforderlich.

 <div style="-Gesamt: 14;">
  <span style="-n: 0"> c </span>
  <span style="-n: 1"> s </span>
  <span style="-n: 2"> s </span>
  <p> Und es ist nicht nur für Briefe! Es ist gut für alle möglichen Sachen!</p>
<p> <strong>Verwandte Notizen:</strong></p>
<ul>
<li> Dies ist viel sauberer als eine alte Methode, die wir gebloggt haben, bei der jede Spannweite Transformation verwenden musste: rotate () mit einem gemeinsamen Transform-Origin-Punkt, der vom Buchstaben selbst abgelegt wurde.</li>
<li> SVG behandelt dies ohne Hackery. (Dies ist kein ganzer Hack, aber da Sie sich in Spannweiten teilen müssen, müssen Sie zumindest den Elternteil aria label mussten, was es dann hackiger macht.)</li>
<li> Nitpick (ich bin der schlimmste): Machen Sie nicht nur HTML-Tags wie diesen Demo-Stift auf Nicht-Demo-Websites aus, die die Leute verwenden müssen.</li>
</ul>
</div>

Das obige ist der detaillierte Inhalt vonGeben Sie den Typ auf einen Kreis ein ... mit Offset-Pfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!