Bagaimana untuk Membina Kesan Slaid Masuk Silang Penyemak Imbas Hanya Menggunakan CSS?

Cara Membuat Peralihan Slaid Masuk Rentas Pelayar dengan CSS Sahaja

Menggunakan CSS, anda boleh mencipta elemen yang meluncur masuk dengan lancar dari kiri tanpa JavaScript. Fleksibiliti ini boleh dilakukan melalui peralihan CSS3 atau animasi CSS3.

Peralihan CSS

Sebagai contoh, anda boleh melaksanakan peralihan yang dicetuskan oleh tuding:

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

Dalam kes ini, melayang di atas .wrapper akan meluncur #slide dari kiri: -100px; ke kiri: 0; sepanjang 1 saat.

Animasi CSS

Sebagai alternatif, anda boleh menggunakan animasi untuk mengautomasikan kesan slaid masuk:

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

Pendekatan ini mengikut mekanisme gelongsor yang sama, tetapi ia memulakan animasi secara automatik selepas 2 saat. Mod animasi-isi: ke hadapan; property memastikan bahawa div kekal kelihatan selepas animasi selesai.

Untuk maklumat tambahan tentang Animasi dan Peralihan CSS, rujuk sumber berikut:

• 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 Membina Kesan Slaid Masuk Silang Penyemak Imbas Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!