css3 animation steps制作饿了么loading

html代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

    .load2 {
        position: absolute;
        width:200px;
        height:160px;
         background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNDgiIGN5PSIxMi40NjMiIGZpbGw9IiNEM0U2RkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjQ3Ljg5IiByeT0iMTIuMzY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDM4KSIvPjwvc3ZnPg==') no-repeat;
        margin-left:-96px;
        margin-top:-100px;
        left:50%;
        top:70%;
        animation:small .8s infinite;
        background-position: center;
    }

    @keyframes small {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(.4);
        }
        100% {
            transform: scale(1);
        }
    }

    .load {
        position: absolute;
        left:50%;
        top:50%;
        background: url('loading.png');
        height:100px;
        width:100px;
        margin-left:-50px;
        margin-top:-50px;
        animation:test 4.5s steps(6) infinite,updown .8s infinite;
        /*-webkit-animation:test 3.5s steps(6) infinite;*/
    }

    @keyframes test {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 0 600px;
        }
    }

    @keyframes updown{
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0px);
        }
    }
</style>
<div class="load"></div>
<div class="load2"></div>
    
</div>
</body>
</html>

相关阅读:
09.Restful规范
微信小程序滚动插件 hSwiper2.0
前端开发中代码仓库的团队使用（Github）
hDProcess.js文档浏览进度插件
Javascrtipt 基本排序算法
NodeWebkit配置文件简介
JavaScript中call,apply,bind方法的总结
Javascript 闭包理解
javascript常用知识点
微信小程序滚动插件 hSwiper

原文地址：https://www.cnblogs.com/CyLee/p/6538525.html