记录自己写的前端小东东,方便以后拿来复用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<meta author="桜智神座一诚·木">
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
/*------------------------------------ loading ------------------------------------*/
.loading {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
margin: -20px 0 0 0px;
border-radius: 5px;
left: 50%;
right: auto;
margin-left: -50px;
margin-top: -46px;
top: 50%;
bottom: 0;
position: absolute;
background-color: rgba(0,0,0,.7);
}
.loading span {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
top: 37.5px;
margin: 0 8px 0 0px;
border-radius: 50%;
background: #37d2d2;
-webkit-animation: load 1.2s ease infinite;
}
.loading span:last-child {
margin-right: 0;
}
@-webkit-keyframes load {
0% {
opacity: 0.2;
-webkit-transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0.2;
-webkit-transform: scale(0);
}
}
.loading span:nth-child(2) {
-webkit-animation-delay: 0.3s;
}
.loading span:nth-child(3) {
-webkit-animation-delay: 0.6s;
}
/*------------------------------------ / loading ------------------------------------*/
</style>
</head>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>