Bagaimana untuk Membina Peralihan Slaid Masuk CSS dari Kiri?

Cara Membuat Peralihan Slaid Masuk CSS dari Kiri

Dalam CSS, mencapai peralihan slaid masuk dari kiri melibatkan memanfaatkan sama ada peralihan atau animasi CSS3. Begini cara anda boleh melaksanakannya:

Menggunakan Peralihan CSS3 dengan Hover (Demo One)

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

Coretan ini mengalihkan kedudukan elemen dari kiri dengan lancar: -100px; kepada 0 lebih 1 saat pada tuding. Anda juga boleh menggunakan transform: translate() untuk melaraskan kedudukan elemen.

Menggunakan Animasi CSS3 (Demo Dua)

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

Sama seperti contoh sebelumnya, animasi ini dimulakan secara automatik selepas 2 saat dengan sifat kelewatan animasi. Menetapkan mod isian-animasi kepada ke hadapan mengekalkan keterlihatan elemen selepas animasi tamat.

Sokongan Penyemak Imbas

Rujuk caniuse.com untuk maklumat terperinci tentang keserasian penyemak imbas untuk peralihan dan animasi CSS.

Bacaan Lanjut

Untuk pengetahuan yang lebih mendalam tentang teknik ini, teroka:

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

Atas ialah kandungan terperinci Bagaimana untuk Membina Peralihan Slaid Masuk CSS dari Kiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!