Mengapa kefungsian undur perlahan dalam fungsi animasi saya tidak berfungsi?-Soal Jawab Rangkaian PHP Cina
Mengapa kefungsian undur perlahan dalam fungsi animasi saya tidak berfungsi?
P粉958986070
P粉958986070 2023-09-20 16:33:43
0
1
425

Saya tidak faham mengapa div kembali ke keadaan biasa tanpa animasi. Saya mencuba segala-galanya
Ini kod saya:

Saya telah mencari di banyak tempat tetapi tidak menemui masalahnya.

Ini css saya:

*{ margin: 0px; padding: 0px; } main{ width: 600px; margin: auto; } div#slides{ display: flex; width: 600px; height: 250px; overflow: hidden; position: absolute; } div#slides:hover{ height: 850px; transition: all 1s ease-in-out 0.5s; } div#imagens{ display: flex; flex-direction: column; width: 600px; height: 850px; z-index: 1; } div#imagens > img{height: 850px;} div#quadro_tudo{ display: flex; margin: 500px 0px; flex-direction: row; justify-content: space-between; align-items: center; } div.btn{ height: 250px; width: 75px; z-index: 2; background-color: rgba(240, 248, 255, 0); } div.btn:hover{ transition: 1s; } div.btn#esq:hover{ background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0)); transition-duration: 1s; } div.btn#dir:hover{ background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0)); }

Saya cuba menukar ketinggian daripada 250px kepada 850px dalam 1 saat dan kembali kepada 250px dalam 1 saat

P粉958986070
P粉958986070

membalas semua (1)
P粉533898694

Anda sepatutnyatransition属性添加到div#slides而不是div#slides:hover.

* { margin: 0px; padding: 0px; } main { width: 600px; margin: auto; } div#slides { display: flex; width: 600px; height: 250px; overflow: hidden; position: absolute; transition: height 1s ease-in-out; } div#slides:hover { height: 850px; } div#imagens { display: flex; flex-direction: column; width: 600px; height: 850px; z-index: 1; } div#imagens > img { height: 850px; } div#quadro_tudo { display: flex; margin: 500px 0px; flex-direction: row; justify-content: space-between; align-items: center; } div.btn { height: 250px; width: 75px; z-index: 2; background-color: rgba(240, 248, 255, 0); } div.btn:hover { transition: 1s; } div.btn#esq:hover { background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0)); transition-duration: 1s; } div.btn#dir:hover { background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0)); }
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!