前端 - css3輪換圖片到第一張圖片時都要閃一下怎么改進？
問題描述
#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：首先要明白為什么會閃，因為0% 和 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：
靠，竟然還有這種方法，以后不可以點擊的輪播圖就用這種方法
回答3：css寫輪播還真是方便，jq簡單的也要控制一個marginLeft屬性，這個css方法老衲收了，謝謝樓主
回答4：這種多張圖片切換的方式可以合成一個雪碧圖，然后使用css3逐幀動畫來完成CSS3動畫之逐幀動畫
回答5：我去實驗一下
相關(guān)文章：
1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題2. javascript - QWebEngineView 如何爬 angular 的動態(tài)數(shù)據(jù)？3. javascript - 使用angular 的ui-sref 中出現(xiàn)了中文參數(shù)，點擊跳轉(zhuǎn)后瀏覽器的地址欄里出現(xiàn)轉(zhuǎn)義后的%AE....%a%44. java - ConcurrentHashMap中的get()方法為什么可以不加鎖？5. java - 郵箱如何發(fā)送html內(nèi)容6. html5 - 這個代碼顯示功能如何實現(xiàn)？7. javascript - 用JS 七牛上傳圖片出現(xiàn)文件已存在的錯誤（file exists）8. java - 字節(jié)流轉(zhuǎn)成字符串之后，在通過字符串轉(zhuǎn)成字節(jié)流后的文件為什么會不一樣？9. css3 - 圖片等比例縮放10. java - 一段遞歸代碼的問題
網(wǎng)公網(wǎng)安備