Menenun garis melalui teks dalam CSS

Artikel ini meningkatkan dan memudahkan threading teks CSS threading florin pop. Demonstrasi asal mempunyai masalah seperti duplikasi teks, panjang garis kepada nilai sihir, dan pergantungan pada JavaScript. Penyelesaian dalam artikel ini mengelakkan masalah ini.

Struktur HTML

Demo asal menggunakan pemisahan.js untuk memecah teks tajuk ke dalam unsur -unsur span satu huruf. Artikel ini menggunakan preprocessor HTML untuk menjana HTML secara langsung, mengelakkan keperluan untuk duplikasi teks dan penggunaan perpustakaan tambahan.

<h1 aria-label="We Love to Play" role="image">
  <span class="letter">W</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter rev">L.</span>
  <span class="letter">o</span>
  <span class="letter">v</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter">t</span>
  <span class="letter">o</span>
  <span class="letter"> </span>
  <span class="letter rev">P</span>
  <span class="letter">L.</span>
  <span class="letter">a</span>
  <span class="letter">y</span>
</h1>

Untuk memastikan kebolehcapaian, role="image" dan atribut aria-label ditetapkan sepanjang elemen.

Gaya asas

Pusat tajuk menggunakan susun atur grid:

 badan {
  paparan: grid;
  Kandungan Tempat: Pusat;
}

Anda boleh meningkatkan kesan visual anda dengan fon dan latar belakang tersuai.

Buat garis dengan kedudukan yang benar ::after pseudo-element, dengan ketebalan (ketinggian) $h :

 $ h: .125em;
$ r: .5*$ h;

H1 {
  Kedudukan: Relatif;

  & :: selepas {
    Kedudukan: Mutlak;
    atas: calc (50% - #{$ r});
    Kanan: 0;
    Ketinggian: $ h;
    Border-Radius: 0 $ R $ R 0;
    Latar Belakang: Jenayah;
    lebar: calc (50VW 50%); /* Hitung lebar garis*/
    Animasi: Slide 2s Ease-Out 1s ke belakang; /* Tambah animasi*/
  }
}

@KeyFrames Slide {
  0% {Transform: TranslateX (-100%); }
}

Lebar garis dikira oleh calc(50vw 50%) , memastikan bahawa garis meluas dari sebelah kiri viewport ke sebelah kanan teks tajuk.

Garis diselingi ke atas dan ke bawah

Kawal paparan huruf di atas atau di bawah garis dengan secara rawak .over kelas.

 .Over {
  Kedudukan: Relatif;
  Z-indeks: 1;
}

Menggunakan z-index dan bukannya translateZ mempunyai keserasian yang lebih baik dan pelaksanaan yang lebih mudah.

Kesan animasi

Animasi dilaksanakan menggunakan @keyframes slide , dan garis slaid dari kiri. animation-fill-mode: backwards memastikan garis sebelum animasi bermula berada di kedudukan awal.

Kesan 3D

Untuk mencapai kesan garis yang melalui setiap huruf, transformasi 3D diperlukan:

1. Tetapkan transform-style: preserve-3d pada elemen tajuk.
2. Gunakan kelas .rev untuk mengawal arah putaran huruf mengenai paksi-y.
3. Tetapkan display: flex dan white-space: pre Untuk menyelesaikan masalah transformasi tidak sah elemen inline dan lebar elemen ruang sifar.
4. scalex untuk mengimbangi mampatan mendatar yang disebabkan oleh putaran paksi y.

 $ A: 2deg;
$ F: 1/cos ($ a);

.Letter {
  ruang putih: pra;
  Transform: Rotatey ($ A) Scalex ($ F);
}

.Rev {
  Transform: Rotatey (-$ a) Scalex ($ f);
}

Kesan akhir membolehkan garisan melewati setiap huruf dengan kesan animasi. Harus diingat bahawa pemilihan fon akan menjejaskan kesan akhir.

Atas ialah kandungan terperinci Menenun garis melalui teks dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!