前端 - 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. 求助一个Android控件名称2. angular.js - 如何在指令里使用ng-click3. node.js通过module.exprots返回的是promise对象而非data?4. 执行composer require mews/captcha报错Your requirements5. python - 请问django的orm能否独立拿出来使用?例如在非web程序中使用6. angular.js - ui-router 为毛不起作用7. angular.js - angular获取radio选项的值,在线等啊亲,连续加班一个礼拜了……8. javascript - Node.js中输出顺序为什么和预期的不一样呢?9. 关于Apache无法启动的程序的方式是怎么解决的10. 如何判断数组写入数据库有重复的值