前端 - 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簡單的也要控制一個(gè)marginLeft屬性，這個(gè)css方法老衲收了，謝謝樓主
回答4：這種多張圖片切換的方式可以合成一個(gè)雪碧圖，然后使用css3逐幀動(dòng)畫來完成CSS3動(dòng)畫之逐幀動(dòng)畫
回答5：我去實(shí)驗(yàn)一下
相關(guān)文章：
1. javascript - 關(guān)于css絕對(duì)定位在ios瀏覽器被橡皮筋遮擋的問題2. python - beautifulsoup獲取網(wǎng)頁內(nèi)容的問題3. python - 能通過CAN控制一部普通的家用轎車嗎？4. mysql優(yōu)化 - 關(guān)于mysql分區(qū)5. javascript - react input file6. 人工智能 - python 機(jī)器學(xué)習(xí) 醫(yī)療數(shù)據(jù) 怎么學(xué)7. centos7 編譯安裝 Python 3.5.1 失敗8. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ，會(huì)帶來哪些效率或者其他方面的好處9. html5 - 只用CSS如何實(shí)現(xiàn)input框的寬度隨框里輸入的內(nèi)容長短自動(dòng)適應(yīng)？10. c++ - 請(qǐng)問MySQL_Connection::isReadOnly 怎么解決？
網(wǎng)公網(wǎng)安備