美文网首页
loading动画

loading动画

作者: 啊烟雨 | 来源:发表于2018-10-25 17:16 被阅读0次

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>loading动画</title>

<style type="text/css">

.box{

width: 300px;

height: 125px;

border: 1px solid #000;

margin: 200px auto 0;

}

.box p{

text-align: center;

width: 100%;

}

.box div{

width: 30px;

height: 70px;

float: left;

background-color: gold;

margin: 15px;

border-radius: 10px;

}

.box div:nth-child(1){

background-color: red;

animation: loading 500ms ease 0s infinite alternate;

}

.box div:nth-child(2){

background-color: green;

animation: loading 500ms ease 100ms infinite alternate;

}

.box div:nth-child(3){

background-color: pink;

animation: loading 500ms ease 200ms infinite alternate;

}

.box div:nth-child(4){

background-color: greenyellow;

animation: loading 500ms ease 300ms infinite alternate;

}

.box div:nth-child(5){

background-color: cyan;

animation: loading 500ms ease 400ms infinite alternate;

}

@keyframes loading{

from{

transform: scaleY(1);

}

to{

transform: scaleY(0.5);

}

}

</style>

</head>

<body>

<div class="box">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<p>loading...</p>

</div>

</body>

</html>

相关文章

网友评论

      本文标题:loading动画

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