html5实现GIF图效果

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               180px;
               height: 300px;
               margin: 50px auto;
               overflow: hidden;

           }
           .run{
               180px;
               height: 300px;
               background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。
               -webkit-animation:run 700ms steps(7) infinite;
           }
           @-webkit-keyframes run{
               from{
                   background-position: 0 0;
               }
               to{
                   background-position: -1260px 0;
               }
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="run">

           </div>

       </div>
   </body>
</html>

本文转载自：http://www.cnblogs.com/qingxh/archive/2016/12/12/6164083.html