css3轮换图片到第一张图片时都要闪一下怎么改进?

poi_rs
  • 477
#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);}
}
回复
阅读 6.3k
5 个回答

首先要明白为什么会闪,因为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);}
}

靠,竟然还有这种方法,以后不可以点击的轮播图就用这种方法

css写轮播还真是方便,jq简单的也要控制一个marginLeft属性,这个css方法老衲收了,谢谢楼主

这种多张图片切换的方式可以合成一个雪碧图,然后使用css3逐帧动画来完成
CSS3动画之逐帧动画

我去实验一下

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏