前端 - 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

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 2

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

Answer 3

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

Answer 4

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 5

I’m going to experiment