Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?

CSS Shape-Outside Property Menyedari Kesan Pudar Teks

Artikel ini memperkenalkan teknik paparan teks laman web yang unik: secara beransur -ansur memendekkan panjang teks dan membuat kesan visual dinamik, yang sangat sesuai untuk laman web kreatif atau paparan seni.

Ini boleh dicapai melalui harta benda shape-outside CSS. shape-outside membolehkan anda menentukan bentuk bukan kubah yang teks akan mengelilingi, mengakibatkan kesan visual teks pudar.

Contoh berikut menunjukkan bagaimana untuk mencapai ini menggunakan shape-outside :

 .container {
  lebar: 300px;
  Ketinggian: 300px;
  Kedudukan: Relatif;
}

.shape {
  Lebar: 100%;
  Ketinggian: 100%;
  latar belakang warna: #f0f0f0;
  Clip-Path: Polygon (0 0, 100% 0, 100% 100%, 0 100%); /* Bentuk laras*/
  Bentuk-Outside: Polygon (0 0, 100% 0, 100% 100%, 0 100%); /* Selaras dengan laluan klip*/
  Terapung: Kiri;
}

.teks {
  margin-kiri: 30px;
  saiz font: 18px;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">
    Ini adalah teks sampel yang secara beransur -ansur mendapat lebih pendek. Ini adalah teks sampel yang secara beransur -ansur mendapat lebih pendek.
  </div>
</div>

Dalam kod, atribut clip-path dan shape-outside bersama-sama menentukan bentuk poligon. Dengan mengubah suai koordinat puncak poligon, anda boleh menyesuaikan bentuk pembungkus teks untuk mengawal kesan pudar teks. Perlu diingatkan bahawa nilai shape-outside harus konsisten dengan clip-path untuk memastikan ketepatan kesannya.

Untuk meneroka kesan ini dengan lebih mendalam, anda boleh cuba mengubah suai nilai koordinat polygon untuk membuat bentuk yang berbeza untuk mencapai pelbagai kesan pudar teks. Sebagai contoh, anda boleh cuba menggunakan bentuk yang lebih kompleks, seperti bulatan atau lengkung, untuk kesan visual yang lebih kaya. Ingat, kunci adalah untuk menyesuaikan nilai polygon untuk mengawal bentuk, dengan itu mengawal bagaimana teks dipaparkan.

Atas ialah kandungan terperinci Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!