示例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>
原图：
 |
