Bagaimana untuk Mencipta Peralihan Slaid Dalam Hanya Menggunakan 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;
}

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; }
}

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!