前端 - 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：我去實驗一下
相關文章：
1. html5 - canvas中的mousedrag事件，為什么鼠標拖出canvas，然后再次移入canvas，drag事件還觸發2. 網頁爬蟲 - python爬蟲用BeautifulSoup爬取<s>元素并寫入字典，但某些div下沒有這一元素，導致自動寫入下一條，如何解決？3. javascript - es6擴展運算符...的問題4. php - 生產環境下,給MySQL添加索引,修改表結構操作,如何才能讓線上業務不受影響？5. Python處理Dict生成json6. mysql 獲取時間函數unix_timestamp 問題？7. python - 如何使用websocket在網頁上動態示實時數據的折線圖？8. 新入手layuiadmin，部署到tp中。想用php自已寫一個后臺管理系統。9. 百度地圖api - Android百度地圖SDK，MapView上層按鈕可見卻不可觸，怎么解決？10. javascript - Vue的計算屬性底層依賴原理是怎么樣？
網公網安備