Tetapkan jenis pada bulatan ... dengan laluan mengimbangi

Berikut adalah beberapa penipuan CSS legit dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. Saya semacam menggulung mata saya pada masa itu, kerana harta itu begitu jelas untuk menghidupkan perkara di sepanjang jalan. Tetapi anda tidak perlu menggunakannya untuk animasi, oleh itu nama semula, dan contoh ini membuktikannya!

Perkara dengan menetapkan unsur -unsur di jalan walaupun, adalah bahawa seluruh elemen dipasang di jalan itu. Jadi jika elemen itu, katakan, chris , keseluruhan perkataan diletakkan pada satu titik di jalan. Caranya Yuanchuan adalah untuk memecahkan rentetan ke dalam huruf-as-span, kemudian letakkan setiap rentang di sepanjang jalan (dengan jarak jauh yang berbeza).

Terdapat laluan teratas yang digunakan untuk setiap rentang:

 Laluan Offset: Path ('M 0 200 a 200 200 0 0 1 400 200')

Kemudian ada beberapa matematik menari mewah (agak khusus untuk demo ini, tentu saja) untuk mengira jarak yang sesuai untuk setiap huruf:

 Jarak Offset: Calc (8% var (-n) * 89.5% / var (-total));

Keindahannya ialah setiap rentang mempunyai harta tersuai tersendiri yang mempengaruhi pengiraan. Tiada CSS berulang-ulang besar: CSS berulang-ulang diperlukan.

 <div style="-total: 14;">
  <span style="-n: 0"> c </span>
  <span style="-n: 1"> s </span>
  <span style="-n: 2"> s </span>
  <p> Dan bukan hanya untuk surat! Ia bagus untuk pelbagai barangan!</p>
<p> <strong>Nota Berkaitan:</strong></p>
<ul>
<li> Ini adalah cara yang lebih bersih daripada kaedah lama yang kita blog di mana setiap rentang terpaksa menggunakan Transform: berputar () dengan titik asal transformasi biasa yang ditetapkan dari surat itu sendiri.</li>
<li> SVG mengendalikan ini tanpa sebarang hackery. .</li>
<li> Nitpick (saya yang paling teruk): Jangan hanya membuat tag HTML seperti pen demo ini di tapak bukan demo yang perlu digunakan oleh orang.</li>
</ul>
</div>

Atas ialah kandungan terperinci Tetapkan jenis pada bulatan ... dengan laluan mengimbangi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!