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

多针动画--练习

作者: 飘零_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