Rumah > hujung hadapan web > tutorial css > Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?

Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?

Linda Hamilton
Lepaskan: 2024-10-30 00:49:29
asal
300 orang telah melayarinya

Can I Trigger CSS Scroll Animation with Just an Anchor Tag?

Mencapai Animasi Tatal CSS Lancar

Soalan:

Adakah mungkin untuk mencetuskan tatal CSS animasi hanya dengan mengklik tag anchor, tanpa memerlukan butang input?

Jawapan:

Ya, adalah mungkin untuk mencapai animasi tatal dengan CSS3 dan tag anchor.

Pelaksanaan:

Untuk melaksanakan ciri ini, gunakan pautan sauh dan sifat kelakuan tatal untuk bekas menatal. Set peraturan CSS berikut akan memberikan kelakuan menatal yang lancar:

<code class="css">scroll-behavior: smooth;</code>
Salin selepas log masuk

Sokongan Penyemak Imbas:

Teknik ini disokong oleh pelayar moden seperti Firefox 36 , Chrome 61 , Safari 15.4 , dan Opera 48 .

Contoh Penggunaan:

Pertimbangkan kod HTML dan CSS berikut:

<code class="html"><head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>
</body></code>
Salin selepas log masuk

Apabila pengguna mengklik pada "Pergi ke foo!" pautan, penyemak imbas akan menatal ke bawah dengan lancar ke elemen dengan id "foo".

Nota: Internet Explorer, bukan Chromium Edge dan versi Safari yang lebih lama tidak menyokong tatal -kelakuan. Dalam penyemak imbas ini, tindakan tatal tidak akan lancar.

Atas ialah kandungan terperinci Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan