Bagaimana untuk Mencipta Kesan Hover Sempadan Bawah Berkembang dengan CSS?

Kesan Tuding: Meluaskan Sempadan Bawah pada Tuding

Dalam usaha mencipta tapak web yang menarik secara visual, anda mungkin menghadapi keperluan untuk menambah interaktif kesan tuding pada elemen anda. Satu kesan tertentu yang boleh meningkatkan reka bentuk anda ialah mengembangkan sempadan bawah pada tuding.

Untuk mencapai kesan ini, anda boleh menggunakan sifat transform:scaleX() CSS. Dengan mengalihkan sifat scaleX daripada 0 kepada 1 pada tuding, anda boleh mencipta ilusi mengembangkan sempadan bawah.

Berikut ialah contoh kod untuk mengembangkan sempadan bawah dari tengah:

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}
h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
h1:hover:after {
  transform: scaleX(1);
}

Walau bagaimanapun, jika anda ingin mengembangkan sempadan dari kiri atau kanan, anda boleh mengubah suai sifat asal-ubah seperti berikut:

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

Kod ini mencipta elemen pseudo untuk menggunakan sempadan dan peralihan, menghalang teks itu sendiri daripada mengalihkan dan mengekalkan struktur semantik HTML anda.

Dengan melaksanakan teknik ini, anda boleh menambah kesan tuding yang dinamik dan menarik secara visual pada sempadan anda, meningkatkan pengalaman pengguna dan menonjolkan tapak web anda.

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