Css3 实现关键帧动画

时间:2022-09-11 09:26:48
<div class="person">

</div>
<script>
var str1 = "@keyframes move{";
for(var i = 0;i < 7;i++){
var str = ((100/6) * i)+"%{"+"background-position:"+(-180*i)+"px 0;}";
str1 += str;
}
$(
"head style").prepend(str1+"}");
</script>
<style>   
.person
{
width
: 180px;
height
: 300px;
background
: url(img/charector.png) left no-repeat;
box-shadow
: 0 0 5px #000;
margin
: 100px auto 0;
animation
: move 1s step-start infinite;
}
</style>

Css3   实现关键帧动画

素材图片如上:

  图片尺寸(1260 * 300)(180 * 7);

使用css3 animation 下的step 帧动画完成!

如上代码实例所示  

纯css3 实现如下:

@keyframes move{
0%{
background-position
: 0 0;
}
16.66667%
{
background-position
: -180px 0;
}
33.33334%
{
background-position
: -360px 0;
}
50%
{
background-position
: -540px 0;
}
66.66667%
{
background-position
: -720px 0;
}
83.33334%
{
background-position
: -900px 0;
}
100%
{
background-position
: -1080px 0;
}
}