css动画 loading 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       html,body,div{
           margin: 0;
           padding: 0;
       }
       .wrapper{
           position: relative;
           display: inline-block;
           padding: 0;
           margin:0;
           width: 20px;
           height:40px;
       }
        .item{
            position: absolute;
            display: inline-block;
            padding: 0;
            margin:0;
            width: 20px;
            height:40px;
            background-color:greenyellow ;
            animation-name: loading;
            animation-timing-function: linear;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;

        }
        .item.down{
            top:0;
        }
        .item.up{
            bottom: 0;
        }
        @keyframes loading {
            0% {
                height: 40px;
            }
            25% {
                height: 34px;
            }
            50% {
                height: 28px;
            }
            75% {
                height: 22px;
            }
            100% {
                height: 16px;
            }
        }
    </style>
    <title>Title</title>
</head>
<body>
        <div style="height: 40px;">
            <div class="wrapper">
                <div class="item up" ></div>
            </div>
            <div class="wrapper">
                <div class="item up" ></div>
            </div>
            <div class="wrapper ">
                <div class="item up" ></div>
            </div>
            <div class="wrapper ">
                <div class="item up" ></div>
            </div>
        </div>
        <div style="height: 40px;">
            <div class="wrapper">
                <div class="item down" ></div>
            </div>
            <div class="wrapper">
                <div class="item down" ></div>
            </div>
            <div class="wrapper">
                <div class="item down" ></div>
            </div>
            <div class="wrapper">
                <div class="item down" ></div>
            </div>
        </div>
        <script>
            let eles = Array.from(document.querySelectorAll(".item"));
            eles.forEach( (item,index)=>{
                item.style.animationDelay = (index%4+1)*0.2 + "s";

            })
        </script>
</body>
</html>

　　

posted @ 2017-05-23 15:38  IsaacYoung  阅读(150)  评论(0)    收藏  举报