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

Question

{代码...}

黄舟 · Answer

First of all, you must understand why it flashes, because 0% and 100% will transition immediately in the case of infinite. There is no transition effect between the fifth and first pictures, so you need to change it like this

@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

Damn, there is such a method. In the future, we will use this method for carousel images that cannot be clicked

伊谢尔伦 · Answer

Css is really convenient to write carousels. JQ also needs to control a marginLeft attribute simply. I accepted this css method. Thank you, host

ringa_lee · Answer

This method of switching multiple images can be combined into a sprite image, and then used to complete the frame-by-frame animation of CSS3
Frame-by-frame animation of CSS3 animation

天蓬老师 · Answer

I’m going to experiment