前端 - css3轮换图片到第一张图片时都要闪一下怎么改进？
问题描述
#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：首先要明白为什么会闪，因为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);}}回答2：
靠，竟然还有这种方法，以后不可以点击的轮播图就用这种方法
回答3：css写轮播还真是方便，jq简单的也要控制一个marginLeft属性，这个css方法老衲收了，谢谢楼主
回答4：这种多张图片切换的方式可以合成一个雪碧图，然后使用css3逐帧动画来完成CSS3动画之逐帧动画
回答5：我去实验一下
相关文章：
1. python - oslo_config2. python - 如何统计一份英文 API 开发文档（如 javadoc文档）的词频？3. mysql优化 - mysql 一张表如果不能确保字段列长度一致，是不是就不需要用到char。4. python - 请问这两个地方是为什么呢？5. python - 为什么match匹配出来的结果是<_sre.SRE_Match object; span=(0, 54), match=’’>6. 请教一个mysql去重取最新记录7. javascript - 按钮链接到另一个网址 怎么通过百度统计计算按钮的点击数量8. 人工智能 - python 机器学习 医疗数据 怎么学9. 大家都用什么工具管理mysql数据库？10. php - 有关sql语句反向LIKE的处理
网公网安备