loading动画：
代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.con{
width: 500px;
height: 450px;
border: 1px solid black;
margin: 50px auto;
/*position: relative;
}*/
.y{
position: absolute;
left: 200px;
top: 400px;
}
.k{
width: 35px;
height: 50px;
line-height: 450px;
margin: 100px 30px 0px;
background-color: red;
border-radius: 23px;
/* position: absolute;*/
float: left;
/*left: 10px;
top:250px;*/
animation: moving 1.0s infinite;
}
.b{
background-color: green;
animation: moving 1.0s infinite 0.1s;
}
.c{
background-color: blue;
animation: moving 1.0s infinite 0.2s;
}
.d{
background-color: yellow;
animation: moving 1.0s infinite 0.3s;
}
.e{
background-color: skyblue;
animation: moving 1.0s infinite 0.4s;
}
@keyframes moving{
0%{
transform: scaleY(1);
}
50%{
transform: scaleY(3);
}
100%{
transform: scaleY(1);
}
}
</style>
</head>
<body>
<div class="con">
<div class="a k"></div>
<div class="b k"></div>
<div class="c k"></div>
<div class="d k"></div>
<div class="e k"></div>
<div class="y"><p>loading...</p></div>
</div>
</body>
</html>
效果：
image.png
网友评论