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>

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Html5 Json应用 - 飞翔的月亮

    Html5 Json应用 - 飞翔的月亮

    2016-12-12 17:00

  • 订阅号如何实现网页授权? - 枫叶落一地

    订阅号如何实现网页授权? - 枫叶落一地

    2016-12-12 16:00

  • HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    2016-12-12 15:00

  • HTML5之文件API - 覃

    HTML5之文件API - 覃

    2016-12-12 14:01

网友点评