CSS实现关键帧动画图标效果 


 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>

 

posted @ 2022-03-02 16:51  野望之风  阅读(192)  评论(0)    收藏  举报