html5实现GIF图效果 - string卿_H5之家 - 中国HTML5教程资源分享第一站

HTML5技术

html5实现GIF图效果 - string卿

字号+ 作者：H5之家来源：H5之家 2016-12-13 10:01 我要评论( )

!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/

<!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>
           <div>

           </div>

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