原寫法:
.loading-img {
width: 1rem;
height: 1rem;
position: absolute;
left:50%;
top:50%;
margin-top:-.5rem;
margin-left:-.5rem;
-webkit-animation:loadingImg .2s infinite;
}
@keyframes loadingImg {
from {
background: url(loading1.png) no-repeat;
background-size：cover;
}
to {
background: url(loading2.png) no-repeat;
background-size：cover;
}
}
}
期待效果:可以精準(zhǔn)還原設(shè)計(jì)稿適配安卓與IOS系統(tǒng)雨饺。
實(shí)際效果
- 安卓系統(tǒng)可以正常顯示
- IOS系統(tǒng) background-size 不生效 背景圖展示不全
解決辦法
.loading-img {
width: 1rem;
height: 1rem;
position: absolute;
left:50%;
top:50%;
margin-top:-.5rem;
margin-left:-.5rem;
-webkit-animation:loadingImg .2s infinite;
background-size: cover;
}
@keyframes loadingImg {
from {
background-image: url(../images/loading1.png);
}
to {
background-image: url(../images/loading2.png);
}
}
問(wèn)題總結(jié)：
- IOS webview存在兼容問(wèn)題(具體因?yàn)槭裁催€沒有查到)，如果效果一定要用CSS寫的話可以選擇不將background-size寫在@keyframes的動(dòng)畫中月而。
- 盡量將background的屬性都分開寫，避免執(zhí)行動(dòng)畫時(shí)覆蓋原有樣式類涣旨。
- 在網(wǎng)上查閱相關(guān)資料時(shí)氏仗，有網(wǎng)友提出Safari也存在同樣問(wèn)題。
