html背景图片动画,css3 背景图动画

示例1： 实现背景图循环播放

效果：

代码：

@keyframes mlfly {

0%{

background-position:0 0;

}

100%{

background-position:210px 0;

}

}

.ele-man{

width:70px;

position:absolute;

top: 30px;

left:50%;

margin-left:-35px;

background-image: url("m1-man.32@2x.png");

background-size:210px 163px;

//background-size:auto 163px;

height:163px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

animation:mlfly .2s steps(3,start) .5s infinite alternate;//这里的3是210/70得来的。

}

原图：

示例2：鼠标划过动画效果

代码：

@keyframes mlfly {

0%{

background-position:0 0;

}

100%{

background-position:0px -4425px;

}

}

.kk1:hover{

animation:mlfly .2s steps(59,start) .0s forwards;

}

.kk1{

position:absolute;

height: 75px;

width: 75px;

background: url('https://img.alicdn.com/tps/TB1sd_fLXXXXXX2XFXXXXXXXXXX-150-9000.jpg') center 0 no-repeat;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

background-size: 75px auto;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

原图：