示例1： 实现背景图循环播放效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@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得来的。
}
</style>
</style>
</head>
<body>
<div class="ele-man"></div>
</body>
</html>
 |
