美文网首页
多针动画--练习

多针动画--练习

作者: 飘零_0f71 | 来源:发表于2019-04-02 19:31 被阅读0次

    背面可见

    .box1, .box2, .box3, .box4, .box5{

    float:left;

    margin-left:20px;

    margin-top:30px;

    border-radius:30%;

    animation:moving 1s ease 1s ;

    }

    @keyframes loading {

    from{

    transform:scale(1);

    }

    to{

    transform:scale(0.5);

    }

    }

    .box{

    width:310px;

    height:135px;

    /*background-color: #016999;*/

                margin:100px auto;

    border:black solid 1px;

    }

    .box1{

    width:40px;

    height:55px;

    background-color:red;

    animation:loading 500ms ease 0s infinite alternate;

    /*margin: 10px auto;*/

    /*border-radius:90%;*/

            }

    .box2{

    width:40px;

    height:55px;

    background-color:#008100;

    animation:loading 500ms ease 100ms infinite alternate;

    }

    .box3{

    width:40px;

    height:55px;

    background-color:#ffc1cb;

    animation:loading 500ms ease 200ms infinite alternate;

    }

    .box4{

    width:40px;

    height:55px;

    background-color:#adff2e;

    animation:loading 500ms ease 300ms infinite alternate;

    }

    .box5{

    width:40px;

    height:55px;

    background-color:#00ffff;

    animation:loading 500ms ease 400ms infinite alternate;

    }

    .log{

    text-align:center;

    margin-top:110px;

    }

    loading...

    相关文章

      网友评论

          本文标题:多针动画--练习

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