原創：CSS3技術-雪碧圖自適應縮放與精靈動畫方案

花了一個禮拜完成了慕課網定製的七夕主題效果，其中有一個沒實現好的功能，就是雪碧圖的自適應縮放

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