masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Bolehkah Anda Mencipta Animasi Tatal CSS Tulen Tanpa Butang?

Bolehkah Anda Mencipta Animasi Tatal CSS Tulen Tanpa Butang?

DDD
Lepaskan： 2024-10-29 13:20:29
asal
737 orang telah melayarinya

Can You Create Pure CSS Scroll Animations Without Buttons?

Animasi Tatal CSS Tulen Dibuat Mudah

Walaupun mengagumkan untuk melaksanakan animasi tatal yang dicetuskan oleh butang input, persoalan timbul: bolehkah kita mencapai kesan yang sama tanpa butang, menggunakan hanya tag sauh?

Penyelesaian

Untuk mencipta animasi tatal lancar tanpa butang, kami boleh memanfaatkan pautan sauh digabungkan dengan sifat kelakuan tatal. Sifat ini, disokong oleh penyemak imbas moden seperti Firefox, Chrome dan Safari, menentukan tingkah laku menatal dalam bekas yang ditetapkan.

Untuk melaksanakan penyelesaian ini:

  1. Dayakan lancar menatal: Tambah kelakuan tatal: lancar; ke bekas yang diingini (cth., html atau elemen induk kandungan yang hendak ditatal).
  2. Buat pautan sauh: Gunakan teg sauh () untuk memaut ke bahagian tertentu atau elemen pada halaman.
  3. Tambah sasaran utama: Tentukan sasaran pautan sauh menggunakan elemen HTML dengan ID yang sepadan.

Contoh Penggunaan :

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

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body></code>
Salin selepas log masuk

Sokongan Penyemak Imbas:

Perlu diingat bahawa walaupun teknik ini disokong oleh pelayar popular, versi Internet Explorer yang lebih lama, bukan Chromium Edge dan Safari mungkin tidak menyokongnya dan menggunakan lompatan serta-merta untuk memautkan sasaran.

Atas ialah kandungan terperinci Bolehkah Anda Mencipta Animasi Tatal CSS Tulen Tanpa Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn
Artikel sebelumnya：Bagaimanakah saya boleh memutarkan imej 45 darjah pada klik hanya menggunakan CSS? Artikel seterusnya：Bagaimanakah Saiz Fon, Ketinggian Garis dan Ketinggian Sebenar Berinteraksi untuk Menentukan Ketinggian Elemen?
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
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2052
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2206
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1862
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1749
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1772
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan