Bagaimanakah Saya Boleh Mencipta Garis Bawah Animasi Kiri-ke-kanan dengan CSS dan Balikkannya pada Tuding?

Menganimasikan Garis Bawah: Dari Kiri ke Kanan

Cabaran untuk mereplikasi kesan peralihan daripada uber.design terletak pada membalikkan peralihan pada tuding. Walaupun CSS yang disediakan boleh menghidupkan garis bawah dari kiri ke kanan, ia tidak mempunyai keupayaan untuk membalikkan animasi.

Untuk mencapai kesan yang diingini, kami boleh memanfaatkan gabungan kedudukan kecerunan dan latar belakang. Dengan menggunakan kecerunan linear pada elemen dan melaraskan kedudukan latar belakang dengan kelewatan, kita boleh mencipta ilusi garis bawah yang berkembang dari kiri ke kanan.

Berikut ialah CSS yang disemak:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

Kod ini mencipta kecerunan linear pada elemen, pada mulanya diletakkan di bahagian bawah kiri (0% 100%). Semasa tuding, kedudukan latar belakang berubah ke bahagian bawah sebelah kanan (100% 100%), menyebabkan kecerunan mengembang lebar elemen, mewujudkan kesan garis bawah bergerak dari kiri ke kanan.

Ke halus -tala animasi, laraskan nilai untuk saiz latar belakang dan tempoh peralihan agar sesuai dengan kesan yang anda inginkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Garis Bawah Animasi Kiri-ke-kanan dengan CSS dan Balikkannya pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!