Bolehkah anda menyembunyikan elemen selepas 5 saat menggunakan CSS sahaja?

Elemen Penyembunyian Auto CSS selepas 5 Saat

Bolehkah anda menyembunyikan elemen 5 saat selepas halaman dimuatkan menggunakan CSS? Penyelesaian jQuery sememangnya boleh dilaksanakan, tetapi adakah mungkin untuk mencapainya menggunakan peralihan CSS?

Jawapannya: Ya

Namun, terdapat kelainan. Peralihan CSS tidak boleh digunakan pada sifat seperti "paparan" atau dimensi untuk mencapai penyembunyian sebenar. Sebaliknya, buat animasi untuk elemen dan togol keterlihatannya kepada "tersembunyi" selepas 5 saat. Pada masa yang sama, tetapkan ketinggian dan lebar kepada sifar untuk mengelakkan pendudukan ruang dalam aliran DOM.

Contoh

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div>

Pendekatan ini mencapai hasil yang diingini menggunakan peralihan CSS, menyembunyikan elemen selepas kelewatan yang ditentukan tanpa menjejaskan aliran halaman.

Atas ialah kandungan terperinci Bolehkah anda menyembunyikan elemen selepas 5 saat menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!