Bagaimana untuk Mencipta Kesan Hover dengan Sempadan Bawah Mengembang?

Kembangkan Sempadan Bawah pada Tuding

Dalam soalan ini, objektifnya ialah untuk mencipta kesan tuding di mana sempadan bawah mengembang apabila kursor melayang di atas elemen. Coretan kod yang disediakan menggunakan elemen pseudo dengan peralihan kelegapan untuk mendedahkan sempadan pada tuding.

Penyelesaian:

Untuk mencapai kesan yang diingini, kita boleh menggunakan transformasi CSS : scaleX() untuk mengembangkan sempadan dan bukannya kelegapan. Begini cara ia berfungsi:

1. Buat elemen pseudo dengan sempadan bawah:

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

2. Gunakan transformasi skalaX() dengan peralihan :

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

3. Kembangkan sempadan pada tuding dengan menetapkan scaleX hingga 1:

   h1:hover:after {
     transform: scaleX(1);
   }

Pengubahsuaian untuk Arah Pengembangan:

Selain itu, kita boleh mengawal arah pengembangan sempadan dengan melaraskan sifat ubah-asal unsur pseudo:

1. Untuk mengembangkan daripada tengah:

   h1:after {
     ...
     transform-origin: 50% 50%;
   }

2. Untuk mengembangkan dari kanan:

   h1:after {
     ...
     transform-origin: 100% 50%;
   }

3. Untuk mengembangkan dari kiri:

   h1:after {
     ...
     transform-origin: 0% 50%;
   }

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Hover dengan Sempadan Bawah Mengembang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!