利用css动画和一个雪碧图做一个动图

总结：主要在于 steps(12,end)函数，12代表整个动画切成多少段 （类似flash时间轴）

　　　 end会跳过所有动画的最后一个关键帧跑到循环的第二动画个开头；start的话会跳过第一个关键帧，直接跑第二个关键帧开始执行（每次动画最后执行的关键帧到第二个循环的头一个关键帧这个过渡就是它们偷吃跳掉的这个）

　　　这个demo如果使用start参数的话会在第一个动画结束切到第二轮开头这段时间会多出个空白动画 （因为start头个关键帧不干活 ，所以这个过渡看到短暂的空白）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html body{
            height: 100%;
        }
        #box{
            position: absolute;
            left: 50%;
            top: 50%;
            width:48px;
            height: 48px;
            transform: translate(-50%,-50%);
            background-image: url("animation.png");
            background-repeat: no-repeat;
            background-position:0 0;
            animation:1s move infinite steps(12,end) ;  /*整个动画执行时间 执行的动画名 循环关键帧的次数 两个关键帧之间的动画效果*/
        }
        @keyframes move {
            from{
                background-position: 0,0;
            }
            to{
                background-position: -576px,0;
            }
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>
</html>

 

posted @ 2020-08-18 01:01  幽悠又  阅读(1142)  评论(0)  编辑  收藏  举报