Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Peralihan Slaid Dalam Hanya Menggunakan CSS?

Bagaimana untuk Mencipta Peralihan Slaid Dalam Hanya Menggunakan CSS?

DDD
Lepaskan: 2024-12-22 12:15:36
asal
436 orang telah melayarinya

How to Create a Slide-In Transition Using Only CSS?

Cara Menambah Peralihan Slaid Masuk dengan CSS Tulen

Dalam reka bentuk web, mencipta peralihan yang menarik secara visual boleh meningkatkan pengalaman pengguna. Satu kesan popular ialah peralihan slaid masuk, di mana elemen bergerak dari luar skrin ke kedudukan yang diingini apabila dicetuskan. Tutorial ini meneroka cara untuk mencapai kesan ini dengan CSS, tanpa memerlukan JavaScript.

Pilihan 1: Peralihan CSS (Pada Tuding)

Peralihan CSS membolehkan anda lancar mengubah sifat unsur dalam tempoh tertentu. Berikut ialah contoh untuk mencipta peralihan slaid masuk pada tuding:

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
Salin selepas log masuk

Pilihan 2: Animasi CSS

Animasi CSS menawarkan lebih kawalan ke atas peralihan, membolehkan anda untuk menentukan masa mula dan tamat. Berikut ialah contoh menggunakan animasi:

#slide {
    left: -100px;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@keyframes slide {
    100% { left: 0; }
}
Salin selepas log masuk

Sokongan dan Sumber Penyemak Imbas

Untuk keserasian penyemak imbas, rujuk pautan berikut:

  • Peralihan CSS: https://caniuse.com/transitions
  • Animasi CSS: https://caniuse.com/animations

Sumber Tambahan

Untuk mengetahui lebih lanjut tentang animasi dan peralihan CSS, lihat Rangkaian Pembangun Mozilla (MDN) berikut ) artikel:

  • Animasi: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
  • Peralihan: https://developer.mozilla.org/en-US/docs/Web/Guide /CSS/Menggunakan_CSS_transitions

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Peralihan Slaid Dalam Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan