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;
   }

   Salin selepas log masuk

2. Gunakan transformasi skalaX() dengan peralihan :

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

   Salin selepas log masuk

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

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

   Salin selepas log masuk

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%;
   }

   Salin selepas log masuk

2. Untuk mengembangkan dari kanan:

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

   Salin selepas log masuk

3. Untuk mengembangkan dari kiri:

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

   Salin selepas log masuk

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!