有的复杂动画效果我们没办法用CSS3直接完成,设计师会给出图片序列帧,我们合成雪碧图,通过steps改变background-position的方式来实现动画,如Demo: https://ningwenjing.github.io...
代码如下:
.ico-vip{width: 44px;height: 30px;overflow: hidden;position: relative;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;}
@keyframes aniVip {
0%{background-position: 0 0;}
100%{background-position: -1564px 0}
}
但是使用这种写法会导致配置比较差的电脑CPU消耗比较明显。在Chrome按shift+esc查看任务管理器,可以看到CPU的占用会变化,这个值的最高点还是比较高的。
background-position不断的改变会造成浏览器不断重绘而导致CPU上升,可以点开Chrome开发者工具中的Layers看到,绘制一直在不断地改变:
在网上查了一下,有同学建议不要用background-position,可以用translate来代替。于是尝试了一下:https://ningwenjing.github.io...
代码如下:
.ico-vip{width: 44px;height: 30px;overflow: hidden;}
.ico-vip:after{content:''; width: 1564px;height: 30px;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;display: block;}
@keyframes aniVip {
0%{transform: translate3d(0,0,0)}
100%{transform: translate3d(-1564px,0,0)}
}
这种写法不会导致重绘,可以减少CPU的消耗。
测试在比较差的机器上测试,CPU可以从20%减少到4%,这个方法还是比较可用的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。