兔斯基实现 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #tsj{
                position: absolute;
                width: 48px;
                height: 48px;
                left: 50%;
                top: 50%;
                /*transform有限制，不能重复用两个，这样子只会有一个生效，这样子的话，就annimation就有作用了*/
                /*transform: translate3d(-50%,-50%,0);

　　　　　　　　　　　整个动作只有一步，在时间为 0 处，position 设置为 start 时动画的第一步已执行完成
　　　　　　　　　　　相同情况下，position 设置为 end ，当时间为 0 时动画的第一步尚未开始


*/
                margin-left: -50px;
                margin-top: -50px;
                border-radius:50% ;
                background: url(img/animation.png);
                animation: move 1s steps(12,end) infinite;
                
                

            }
            @keyframes move{
                from{background-position: 0 0;}
                to{background-position: -576px 0;}
            }
        
        </style>
    </head>
    <body>
        <div id="tsj">
            
        </div>
    </body>
</html>

 

posted @ 2018-09-19 11:03  你若精彩，蝴蝶自来  阅读(291)  评论(0)  编辑  收藏  举报