前端 - css3輪換圖片到第一張圖片時都要閃一下怎么改進(jìn)？
問題描述
#lunbo{ width: 1226px; height: 460px; /*background: url(imgs/lunbo1.jpg);*/ animation: 16s lunbo ease-in infinite;}@keyframes lunbo{ 0%{background: url(imgs/lunbo1.jpg);} 25%{background: url(imgs/lunbo2.jpg);} 50%{background: url(imgs/lunbo3.jpg);} 75%{background: url(imgs/lunbo4.jpg);} 100%{background: url(imgs/lunbo5.jpg);}}
問題解答
回答1：首先要明白為什么會閃，因?yàn)?% 和 100%在infinite的情況下是會馬上過渡過去的，第5張和第一張圖片之間并沒有過渡效果，所以要這樣改
@keyframes lunbo{ 0%{background: url(imgs/lunbo1.jpg);} 20%{background: url(imgs/lunbo2.jpg);} 40%{background: url(imgs/lunbo3.jpg);} 60%{background: url(imgs/lunbo4.jpg);} 80%{background: url(imgs/lunbo5.jpg);} 100%{background: url(imgs/lunbo1.jpg);}}回答2：
靠，竟然還有這種方法，以后不可以點(diǎn)擊的輪播圖就用這種方法
回答3：css寫輪播還真是方便，jq簡單的也要控制一個marginLeft屬性，這個css方法老衲收了，謝謝樓主
回答4：這種多張圖片切換的方式可以合成一個雪碧圖，然后使用css3逐幀動畫來完成CSS3動畫之逐幀動畫
回答5：我去實(shí)驗(yàn)一下
相關(guān)文章：
1. PHPExcel表格導(dǎo)入數(shù)據(jù)庫怎么導(dǎo)入2. 預(yù)訂金和尾款分別支付3. thinkphp6使用驗(yàn)證器 信息如何輸出到前端頁面4. macos - 無法source activate python275. python - 調(diào)用api輸出頁面，會有標(biāo)簽出現(xiàn)，請問如何清掉？6. 運(yùn)行python程序時出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯誤？7. python - sqlalchemy更新數(shù)據(jù)報錯8. 我在導(dǎo)入模板資源時遇到無法顯示的問題，請老師解答下9. empty比isset更嚴(yán)格一點(diǎn)10. javascript - h5微信中怎么禁止橫屏
網(wǎng)公網(wǎng)安備