前端 - css3轮换图片到第一张图片时都要闪一下怎么改进？

Question

#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);}
}

Answer 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);}
}

Answer 2

靠，竟然還有這種方法，以後不可以點擊的輪播圖就用這種方法

Answer 3

css寫輪播還真是方便，jq簡單的也要控制一個marginLeft屬性，這個css方法老衲收了，謝謝樓主

Answer 4

這種多張圖片切換的方式可以合成一個雪碧圖，然後使用css3逐幀動畫來完成
CSS3動畫之逐幀動畫

Answer 5

我去實驗一下