1 <html>
2 <head>
3 <style type="text/css">
4
5 .img{
6 width:60px;
7 height:60px;
8 background-image:url('https://main.qcloudimg.com/trisys/assets/home/images/product/ani-storage.png');
9 background-size:100% auto;
10 background-position:0 -1440px;//背景图片定位
11 animation:poleave .5s steps(24) forwards;//steps（number）逐帧动画，number=图片帧数-1
12
13 }
14 .img:hover{
15 -webkit-animation:poenter .5s steps(24) forwards;
16 }
17 @-webkit-keyframes poenter {
18 0%{
19 background-position: 0 0;
20 }
21 to{
22 background-position: 0 -1440px;
23 }
24 }
25 @-webkit-keyframes poleave {
26 0%{
27 background-position: 0 -1440px;
28 }
29 to{
30 background-position: 0 0;
31 }
32 }
33 </style>
34 </head>
35 <body>
36 <body>
37 <div class='img'></div>
38 </body>
39 </body>
40 </html>
