最近做了一个h5的小项目,里面涉及到的动画效果比较多,其中有一个就是用雪碧图加css3做动画。
一开始遇到的问题就是雪碧图必须得用绝对坐标去获取图片的位置,但是我们需要做到的是自适应不同的屏幕
针对这种情况,作出了以下的解决方案:
上面的图片是我需要实现效果的雪碧图,规格是1*5,一般我们需求填充到整个背景的时候是使用background-size:100% 100%;不过这也不是我们想要的。
那如果我们想要填充单个元素,我们可以按数量进行缩放:background-size:100% 500%,然后通过百分比去获取位置。
html:
<div class="circle">
<div class="animation_wrap"></div>
</div>
css:
.circle{
width: auto;
height:auto;
position: absolute;
z-index:100;
.animation_wrap{
height:.4rem;
width:.4rem;
position:relative;
z-index:99;
overflow:hidden;
transform:translate3d(-5px,-5px,0);
animation-name:frames;
animation-duration:1.5s;
animation-timing-function:step-start;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-fill-mode:none;
background-image:url(../images/spritesheet.png);
background-size:100% 500%;
}
}
@keyframes frames{
0%{
background-position:0% 0%;
}
20%{
background-position:0% -100%;
}
40%{
background-position:0% -200%;
}
60%{
background-position:0% -300%;
}
80%{
background-position:0% -400%;
}
100%{
background-position:0% -500%;
}
}