Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengubah :Tuding Animasi kepada Interaksi Klik/Sentuh untuk Peranti Mudah Alih?

Bagaimana untuk Mengubah :Tuding Animasi kepada Interaksi Klik/Sentuh untuk Peranti Mudah Alih?

Barbara Streisand
Lepaskan: 2024-11-15 08:27:02
asal
464 orang telah melayarinya

How to Transform :hover Animations into Click/Touch Interactions for Mobile Devices?

Kesan Tuding Merentasi Platform: Mengubah :tuding menjadi Klik/Sentuh

Peranti mudah alih memberikan cabaran unik untuk animasi dipacu CSS yang dicetuskan oleh : berlegar. Untuk memastikan pengalaman pengguna yang lancar, pembangun selalunya perlu menyesuaikan kesan ini untuk berfungsi dengan peristiwa sentuhan atau klik. Artikel ini meneroka penyelesaian mudah untuk menukar animasi :hover kepada interaksi berasaskan klik untuk peranti mudah alih.

Contoh berikut menunjukkan animasi yang dicetuskan oleh :hover pada bar maklumat. Apabila lebar skrin melebihi 700px, animasi kekal boleh dicetuskan dengan tuding. Walau bagaimanapun, untuk skrin yang lebih kecil, animasi diubah suai untuk dicetuskan oleh peristiwa klik.

Animasi CSS:

.info-slide {
  transition: height .4s ease-in-out;
  height: 60px;
  background: url(../images/blue-back.png);
}

.info-slide:hover {
  height: 300px;
}
Salin selepas log masuk

Pertanyaan Media untuk Peralihan Responsif :

@media screen and (max-width: 700px) {
  .info-slide {
    cursor: pointer;
  }

  .info-slide:active {
    height: 300px;
  }
}
Salin selepas log masuk

Dalam penyelesaian ini, kami menggunakan pemilih :aktif dalam sempena :hover. Menurut w3schools, pendekatan ini secara berkesan mengubah animasi menjadi interaksi berasaskan klik atau sentuhan apabila lebar skrin di bawah 700px.

Menguji penyelesaian ini dalam persekitaran mudah alih mengesahkan bahawa animasi bertindak balas sewajarnya, memberikan pengguna yang konsisten pengalaman merentas peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah :Tuding Animasi kepada Interaksi Klik/Sentuh untuk Peranti Mudah Alih?. 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