动画

作者: 宠着我家刘蕊 | 来源:发表于2018-11-29 15:56 被阅读0次

    <DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>动画</title>

    <style type="text/css">

    *{

    margin: 0;

    padding: 0;

    }

    .donghua{

    width: 500px;

    height: 300px;

    border: 1px solid #000;

    margin: 200px auto 0;

    border-radius: 10px;

    line-height: 150px;

    padding-top: 35px;

    }

    .donghua p{

    text-align: center;

    width: 100%;

    }

    .donghua div{

    width: 20px;

    height: 50px;

    float: left;

    background-color: gold;

    margin: 15px;

    padding-top:50px;

    border-radius: 60px;

    }

    .donghua div:nth-child(1){

    background-color: red;

    animation: loading 500ms ease 0ms infinite alternate;

    }

    .donghua div:nth-child(2){

    background-color: yellow;

    animation: loading 500ms ease 150ms infinite alternate;

    }

    .donghua div:nth-child(3){

    background-color: orange;

    animation: loading 500ms ease 500ms infinite alternate;

    }

    .donghua div:nth-child(4){

    background-color: greenyellow;

    animation: loading 500ms ease 600ms infinite alternate;

    }

    .donghua div:nth-child(5){

    background-color: #993300;

    animation: loading 500ms ease 600ms infinite alternate;

    }

    @keyframes loading{

    from{

    transform: scaleY(1);

    }

    to{

    transform: scaleY(0.5);

    }

    }

    </style>

    </head>

    <body>

    <div class="donghua">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <p>loading...</p>

    </div>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:动画

          本文链接:https://www.haomeiwen.com/subject/tbdnqqtx.html