CSS3技术-雪碧图自适应缩放

花了一个礼拜完成了慕课网定制的七夕主题效果，其中有一个没实现好的功能，就是雪碧图的自适应缩放

ps: 如下实现都是基于移动端的处理

原图以下： 人物是采用的是雪碧图，经过坐标绝对数据取值

问题很明显，在缩放的屏幕上人物仍是按照原尺寸大小显示

后来临时留了一节预备的方案：CSS3的scale处理直接可让元素缩放

经过一个缩放的算放控制scale从而让雪碧图的元素能够缩放，目测仍是不错。

可是这会带一系列的计算问题，由于经过sacle缩放后的元素，在浏览器布局中仍是按照原尺寸计算的，因此这样的方案我也是很是的不满意

雪碧图常规的方案通常会作几套不一样大小的图去适应不一样的设备尺寸

这里我特指移动端单图的处理，采用的技术很简单CSS3一些知识点

先看看原图与处理后的效果

来说解下原理，说白了很简单

先观察下矩阵的排量如上是行3 竖3 因此矩阵就是3*3的排列，可是这里只有8张图，怎么处理以后会讲

通常想让背景图填充整个元素在css3中能够经过background-size:100% 100%处理

显然不能让整图去填充元素，整图填充一个元素就是这效果

如何让单图填充一个元素呢? 这里我想到了一个办法，把整图总体缩放，额，就是总体缩放。。。

3*3的矩阵，我横竖按照矩形的数量比缩放100%

CSS

1	background-size : 300% 300% ;

到了这一步估计你们都猜出来了，很简单了，经过百分比去取图了

至于精灵动画实现的手段太多了，好比定时器的帧动画，CSS3的animation动画，canvas动画

说真的全部的方案我都实现过，包括在移动端上线测试等等

目前最为理想的就是经过CSS3关键帧处理动画，若是动画多写一堆的样式就是一个蛋疼的事

因此这里我建议能够采用脚本生成关键帧，经过内联style加载，哈哈~~~ 很是完美~

刚刚提到了若是3*3的矩阵，可是总数不到9个要如何处理？

因此这里我提供一个关键帧的算法给你们参考下，比较简单

这是我项目中的用了，为了便于你们理解，我作了一个简单的

你们若是有兴趣能够链接到github，顺手踩一踩Followers下，感谢~~

github链接 ： https://github.com/JsAaron/adaptive-sprite