示例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("[email protected]");
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>
原图：
示例2：鼠标划过动画效果
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@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;
}
</style>
</style>
</head>
<body>
<div class="kk1"></div>
</body>
</html>
原图：
