码迷,mamicode.com
首页 > 其他好文 > 详细

跑步动画

时间:2017-02-15 13:36:58      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:back   auto   absolute   body   url   abs   div   需要   person   

需要一张如下要求的图片(背景为透明色)
技术分享
<title>跑步动画</title>
    <style type="text/css">
        .box{
            width: 360px;
            height: 360px;
            position: relative;
            margin: 100px auto;
        }
        .person{
            width: 180px;
            height: 300px;
            background: url(‘charector.png‘);
            position: absolute;
            animation-name: person;
            animation-duration: 5000ms;
            animation-iteration-count: infinite;
            animation-timing-function: step-start;
        }
        @keyframes person {
            0%{
                background-position: 0 0;
            }
            14.3%{
                background-position: -180px 0;
            }
            28.6%{
                background-position: -360px 0;
            }
            42.9%{
                background-position: -540px 0;
            }
            57.2%{
                background-position: -720px 0;
            }
            71.5%{
                background-position: -900px 0;
            }
            85.8%{
                background-position: -1080px 0;
            }
            100%{
                background-position: 0 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="person"></div>
    </div>
</body>

跑步动画

标签:back   auto   absolute   body   url   abs   div   需要   person   

原文地址:http://www.cnblogs.com/adialike/p/6401019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!