zoukankan      html  css  js  c++  java
  • html5, css实现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>

  • 相关阅读:
    [概述]移动机器人自主探索
    MRPT编译
    Kinect2.0相机标定
    小豆包的学习之旅:里程计运动模型
    小豆包的学习之旅:入门篇
    Kinect2.0点云数据获取
    COFF,amd64.vc90.mfc两个布署的问题
    [硬件]Robot运动控制
    [硬件]Urg_viewer数据读取
    [硬件]三维点云数据获取
  • 原文地址:https://www.cnblogs.com/qingxh/p/6164083.html
Copyright © 2011-2022 走看看