Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?

WBOY

Lepaskan： 2023-09-13 10:33:03

ke hadapan

1150 orang telah melayarinya

Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?

Reka bentuk web yang cantik dan menarik tidak pernah menjadi lebih berharga. Terdapat banyak laman web yang mungkin kelihatan menarik. Mereka masih tidak memberi impak yang baik kepada penonton. Apabila pelawat tiba di tapak web anda, perkara pertama yang mereka perhatikan ialah rupa tapak anda. Tipografi ialah representasi visual teks bertulis. Ia termasuk elemen seperti kerning dan reka bentuk huruf.

Dalam reka bentuk laman web, fon bukan sekadar huruf. Penampilan tapak web anda akan berubah, sama seperti semasa anda menukar warna fon. Mencipta kesan yang berbeza, seperti membelah teks, boleh memberikan khalayak anda kesan visual yang besar.

CSS menyediakan pelbagai fungsi dan peralihan kepada elemen HTML seperti animasi, kesan hover, kesan neon, dll. Oleh itu, kami akan menggunakan sifat ini untuk mencipta kesan pemisahan teks. Dalam artikel ini, kita akan membincangkan cara mencipta kesan teks berpecah menggunakan CSS.

Kesan belahan mendatar teks

Pisah teks apabila kursor melayang di atasnya, dipanggil Split Effect. Pemisahan teks secara mendatar akan dilakukan menggunakan :before dan :after pseudo-selectors serta hover selectors.

“:before” pseudo-selector - digunakan untuk memasukkan sesuatu sebelum kandungan unsur.
":after" pseudo-selector - digunakan untuk memasukkan kandungan selepas kandungan elemen. Atribut kandungan menentukan kandungan yang akan ditulis selepas atau sebelum elemen yang dipilih
Atribut "z-index" - Apabila elemen bertindih hadir, ia muncul pada tindanan. Jadi, untuk menentukan elemen mana yang akan muncul di bahagian atas timbunan, kami memberikannya indeks-z yang lebih besar.

Nilai boleh jadi 1, 2, 3…. Nilainya boleh menjadi negatif jika anda ingin mengekalkan elemen di bawah elemen lain. Jadi anda hanya menetapkan nilai indeks z yang lebih rendah

Langkah untuk diikuti

Tulis teks dan tengahkannya serta gayakannya.
Gunakan pemilih :before untuk menetapkan separuh pertama (separuh atas) teks kepada kelabu.
Gunakan pemilih :selepas untuk menutup kandungan kelabu.
Beri setiap pemilih indeks-z supaya acara disusun secara berurutan.
Temui kandungan dengan melayang di atas teks, mencipta kesan belahan mendatar.

Contoh

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title>Split Horizontal Effect</title>
   <style>
      body{
         margin: 10px;
         padding: 0;
         font-family: verdana, Helvetica, arial;
         letter-spacing: 1px;
      }
      #Example {
         position: absolute;
         top: 50%;
         left: 38%;
         font-size: 60px;
         z-index: -1;
         color: red;
      }
      #Example::before {
         content: attr(id);
         position: absolute;
         height: 60%;
         color: gray;
         z-index: 1;
         top: 4px;
         left: 1px;
         overflow: hidden;
      }
      #Example::after {
         content: attr(id);
         position: absolute;
         height: 60%;
         top: 0;
         left: 0;
         overflow: hidden;
         color: red;
         border-bottom: 1px solid white;
         z-index: 2;
         transition: 1s;
      }
      #Example:hover::after {
         border-bottom: 4px solid white;
         top: -7px;
         overflow: hidden;
      }
   </style>
</head>
<body>
   <h1 id= "Example"> Example </h1>
</body>
</html>

Salin selepas log masuk

Kesan segmentasi teks

Sekarang mari kita bincangkan cara mencipta kesan pembahagian teks menegak.

Langkah untuk diikuti

Buat elemen bahagian dengan class="container". Gayakan bekas dengan sewajarnya.
Buat elemen div di dalam elemen bahagian. Cipta dua elemen p di dalamnya. Kedudukan dan gaya mengikut citarasa anda. Elemen p ini mengandungi teks yang akan dipecahkan. Teks akan ditulis sekali bagi setiap elemen p.
Beri teks bentuk menggunakan sifat clip-path. Kemudian, gunakan sifat transformasi untuk menterjemah teks pada tuding.

Contoh

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Split effect </title>
   <style>
      .container {
         position: absolute;
         transform: translate(-50%, -50%);
         top: 35%;
         left: 40%;
         color: cyan;
      }
      .demo {
         position: absolute;
         text-transform: uppercase;
         font-size: 50px;
         letter-spacing: 1px;
         transition: 4s ease-in;
      }
      .demo1 {
         clip-path: polygon (0 10%, 30% 0, 100% 0, 100% 0%, 50% 0, 0 100%);
      }
      .demo2 {
         clip-path: polygon (0 100%, 50% 0, 100% 100%, 100% 100%, 0 100%, 47% 0);
      }
      .box:hover .demo1 {
         transform: translateY(-30px);
      }
      .box:hover .demo2 {
         transform: translateY(20px);
      }
   </style>
</head>
<body>
   <section class= "container">
      <div class= "box">
         <p class= "demo demo1"> Example </p>
         <p class= "demo demo2"> Example </p>
      </div>
   </section>
</body>
</html>

Salin selepas log masuk

Gunakan sifat laluan keratan

Sifat

clip-path CSS digunakan untuk mencipta kawasan keratan yang digunakan untuk menentukan bahagian elemen mana yang akan dipaparkan pada halaman web. Bahagian di dalam kawasan akan dipaparkan, manakala bahagian di luar kawasan akan disembunyikan.

Nilai

Clipping Path Polygon () ialah salah satu bentuk yang terdapat dalam geometri asas. Ia membolehkan kami beroperasi pada berbilang set nilai paksi-x dan y yang berbeza (dalam mana-mana unit).

Tatabahasa

element{
   clip-path: polygon (x y, x y, x y);
}

Salin selepas log masuk

Kita boleh memahami harta ini dengan bantuan contoh berikut.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Clip-path Property</title>
   <style>
      h3{
         color: red;
         font-size: 30px;
         text-decoration: underline;
      }
      .demo {
         clip-path: polygon(30% 0%, 70% 30%, 50% 80%, 0% 40%);
      }
      .demo1{
         clip-path: polygon(50% 10%, 61% 45%, 98% 30%, 68% 67%, 75% 91%, 48% 70%, 18% 91%, 32% 67%, 4% 45%, 42% 45%);
      }
   </style>
</head>
<body>
   <center>
      <h3>Clip-path Property</h3>
      <img  src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo" alt="Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?" >
      <h4> Diamond shape polygon </h4>
      <img  src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1" alt="Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?" >
      <h4>Star Shape Polygon</h4>
   </center>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Salah satu elemen kebolehgunaan yang lebih penting dalam reka bentuk web ialah kebolehbacaan. Pengguna seharusnya boleh membaca dan memahami bahan anda dengan mudah. Jika kandungan teks laman web anda adalah unik, maka peluang laman web tersebut menjadi popular adalah tinggi. Ini kerana teks ialah salah satu elemen paling biasa yang kelihatan hambar dalam kebanyakan tapak web. Oleh itu, untuk menarik perhatian pengguna, pembangun boleh mencuba gaya penulisan teks yang berbeza dan unik. Salah satunya ialah kesan teks berpecah.

Dalam artikel ini, kami membincangkan cara yang berbeza untuk mencipta kesan pecahan pada teks dalam halaman web. Untuk membuat pemisahan mendatar, kami menggunakan :before dan :after pseudo-selector. Untuk membuat pecahan pelbagai bentuk, kami menggunakan sifat clip-path Polygon () CSS.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!