花了一個禮拜完成了慕課網定制的七夕主題效果，其中有一個沒實現好的功能，就是雪碧圖的自適應縮放
ps: 以下實現都是基於移動端的處理
原圖如下： 人物是采用的是雪碧圖，通過坐標絕對數據取值
問題很明顯，在縮放的屏幕上人物還是按照原尺寸大小顯示
后來臨時留了一節預備的方案：CSS3的scale處理直接可以讓元素縮放
通過一個縮放的算放控制scale從而讓雪碧圖的元素可以縮放，目測還是不錯。
但是這會帶一系列的計算問題，因為通過sacle縮放后的元素，在瀏覽器布局中還是按照原尺寸計算的，所以這樣的方案我也是非常的不滿意
雪碧圖常規的方案一般會做幾套不同大小的圖去適應不同的設備尺寸
這里我特指移動端單圖的處理，采用的技術很簡單CSS3一些知識點
先看看原圖與處理后的效果
來講解下原理，說白了很簡單
先觀察下矩陣的排量如上是行3 豎3 所以矩陣就是3*3的排列，但是這里只有8張圖，怎么處理之后會講
一般想讓背景圖填充整個元素在css3中可以通過background-size:100% 100%處理
顯然不能讓整圖去填充元素，整圖填充一個元素就是這效果
如何讓單圖填充一個元素呢? 這里我想到了一個辦法，把整圖整體縮放，額，就是整體縮放。。。
3*3的矩陣，我橫豎按照矩形的數量比縮放100%
background-size: 300% 300%;
這才是最關鍵的一步，這樣單個元素顯示一張圖
到了這一步估計大家都猜出來了，很簡單了，通過百分比去取圖了
至於精靈動畫實現的手段太多了，比如定時器的幀動畫，CSS3的animation動畫，canvas動畫
說真的所有的方案我都實現過，包括在移動端上線測試等等
目前最為理想的就是通過CSS3關鍵幀處理動畫，如果動畫多寫一堆的樣式就是一個蛋疼的事
所以這里我建議可以采用腳本生成關鍵幀，通過內聯style加載，哈哈~~~ 非常完美~
剛剛提到了如果3*3的矩陣，但是總數不到9個要如何處理？
所以這里我提供一個關鍵幀的算法給大家參考下，比較簡單
這是我項目中的用了，為了便於大家理解，我做了一個簡單的
大家如果有興趣可以連接到github，順手踩一踩Followers下，感謝~~
github連接 ： https://github.com/JsAaron/some-demo/tree/master/sprite-adaptive