less代码如下
.keyframes (@name, @frames) {
@-webkit-keyframes @name { @frames(); }
@-moz-keyframes @name { @frames(); }
@-o-keyframes @name { @frames(); }
@keyframes @name { @frames(); }
}
.animationName(@name){
-webkit-animation-name: @name;
animation-name: @name;
}
.keyframes (shipTab, {
0% {
background:url(img/shipAni1.jpg) no-repeat;
background-size:cover;
}
25%{
background:url(img/shipAni2.jpg) no-repeat;
background-size:cover;
}
50%{
background:url(img/shipAni3.jpg) no-repeat;
background-size:cover;
}
75% {
background:url(img/shipAni4.jpg) no-repeat;
background-size:cover;
}
100% {
background:url(img/shipAni1.jpg) no-repeat;
background-size:cover;
}
});
.shipTab{
.animationName(shipTab);
animation-iteration-count:infinite;
}
.ship{
width: 12rem;
height: 10rem;
}
.animatedMd{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
html
<div class=" ship animatedMd shipTab"></div>
在安卓浏览器和微信浏览器中均显示正常
但是在iphone的Safari和微信浏览器中,backgroundimg的size都显示的原始大小
遇到相同问题, 请问解决了吗?