首页 > 代码库 > css3 animation steps制作饿了么loading

css3 animation steps制作饿了么loading

2024-09-08 08:36:46   216人阅读

 

技术分享

 

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>

 

css3 animation steps制作饿了么loading


联系
我们