A级成人片一区二区三区,亚洲电影网站伊人,天天啪和狠狠插

自適應雪碧圖

用雪碧圖做精靈動畫會有一個問題：

必須通過絕對尺寸獲取圖片坐標，否則就會出錯，大多情況下可能會準備2套圖片

在七夕主題中就存在這樣一個沒有解決的問題，所以在分辨率縮放的情況下，精靈圖就顯得不對稱了。針對這樣的情況，我特意研究了下，有2種方案可以解決，一種是基于CSS3的scale處理直接可以讓元素縮放，另一種就是通過background-size 讓精靈圖實現自適應縮放。

背景圖自適應方案：

看下通過background-size處理后的效果圖，實現了縮放自適應了

來講解下原理，說白了很簡單先觀察下矩陣的排量如上是行3 豎3 所以矩陣就是3*3的排列，但是這里只有8張圖，一般想讓背景圖填充整個元素在css3中可以通過background-size:100% 100%處理顯然不能讓整圖去填充元素，整圖填充一個元素就是這效果

如何讓單圖填充一個元素呢? 這里我想到了一個辦法，把整圖整體縮放，額，就是整體縮放。。。3*3的矩陣，我橫豎按照矩形的數量比縮放100%。按照矩形的排列整體縮放背景圖：

background-size: 300% 300%;

這才是最關鍵的一步，這樣單個元素顯示一張圖，到了這一步估計大家都猜出來了，很簡單了，通過百分比去取圖了

接下來，我們可以很愉快的去改造圣誕的精靈動畫咯

右邊代碼區域，有一張精靈圖由3張圖組成，現在通過關鍵幀制作3幀動畫，需要寫出對應的keyframes的規則，這里需要做背景圖的自適應處理，所以需要按照百分比設置坐標。

?不會了怎么辦: 提供2種寫法：

    @-webkit-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }

    @-moz-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        50% {
            background-position: -100% 0%;
        }
        75% {
            background-position: -200% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }

提交

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求