用雪碧圖做精靈動(dòng)畫(huà)會(huì)有一個(gè)問(wèn)題：
必須通過(guò)絕對(duì)尺寸獲取圖片坐標(biāo)，否則就會(huì)出錯(cuò)，大多情況下可能會(huì)準(zhǔn)備2套圖片
在七夕主題中就存在這樣一個(gè)沒(méi)有解決的問(wèn)題，所以在分辨率縮放的情況下，精靈圖就顯得不對(duì)稱了。針對(duì)這樣的情況，我特意研究了下，有2種方案可以解決，一種是基于CSS3的scale處理直接可以讓元素縮放，另一種就是通過(guò)background-size 讓精靈圖實(shí)現(xiàn)自適應(yīng)縮放。
背景圖自適應(yīng)方案：
看下通過(guò)background-size處理后的效果圖，實(shí)現(xiàn)了縮放自適應(yīng)了
background-size: 300% 300%;
右邊代碼區(qū)域，有一張精靈圖由3張圖組成，現(xiàn)在通過(guò)關(guān)鍵幀制作3幀動(dòng)畫(huà)，需要寫出對(duì)應(yīng)的keyframes的規(guī)則，這里需要做背景圖的自適應(yīng)處理，所以需要按照百分比設(shè)置坐標(biāo)。
提供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%;
}
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)