html5, css实现GIF图效果

最新推荐文章于 2024-04-29 21:30:00 发布

axbrt02862

最新推荐文章于 2024-04-29 21:30:00 发布

阅读量925

点赞数

原文链接：http://www.cnblogs.com/qingxh/p/6164083.html

版权

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

           }
           .run{
               width: 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>