Bagaimana untuk Mencipta Pengembangan Animasi Sempadan Bawah pada Tuding?

Kesan Tuding: Peluasan Animasi Sempadan Bawah

Dalam soalan ini, matlamatnya ialah untuk mencipta kesan tuding yang memanjangkan sempadan bawah elemen apabila melayang. Untuk mencapai kesan ini, kita boleh menggunakan sifat transformasi dan mengalihkannya daripada 0 kepada 1 pada tuding.

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

Pendekatan ini menggunakan elemen pseudo untuk memisahkan peralihan sempadan daripada teks, mengekalkan HTML asal struktur. Harta asal transformasi boleh dimanipulasi untuk mengembangkan sempadan dari arah yang berbeza, seperti yang digambarkan di bawah:

<h1>

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

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengembangan Animasi Sempadan Bawah pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!