前端 - css3輪換圖片到第一張圖片時(shí)都要閃一下怎么改進(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：首先要明白為什么會(huì)閃，因?yàn)?% 和 100%在infinite的情況下是會(huì)馬上過渡過去的，第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簡(jiǎn)單的也要控制一個(gè)marginLeft屬性，這個(gè)css方法老衲收了，謝謝樓主
回答4：這種多張圖片切換的方式可以合成一個(gè)雪碧圖，然后使用css3逐幀動(dòng)畫來(lái)完成CSS3動(dòng)畫之逐幀動(dòng)畫
回答5：我去實(shí)驗(yàn)一下
相關(guān)文章：
1. 數(shù)組按鍵值封裝！2. angular.js - webpack build后的angularjs路由跳轉(zhuǎn)問題3. java - web項(xiàng)目中，用戶登陸信息存儲(chǔ)在session中好 還是cookie中好，取決于什么？4. 老師，怎么不講一次性添加多個(gè)數(shù)據(jù)5. mysql - 查詢字段做了索引為什么不起效,還有查詢一個(gè)月的時(shí)候數(shù)據(jù)都是全部出來(lái)的，如果分拆3次的話就沒問題，為什么呢。6. mysql - 大部分?jǐn)?shù)據(jù)沒有行溢出的text字段是否需要拆表7. pdo - mysql 簡(jiǎn)單注入疑問8. Mysql取下一條記錄9. python - linux 下用wsgifunc 運(yùn)行web.py該如何修改代碼10. 表格對(duì)其 只涉及到對(duì)其，沒有涉及到大小，長(zhǎng)寬還有背景色類的嗎
網(wǎng)公網(wǎng)安備