使用CSS3简单实现正在加载动效，原理为animation + keyframes。
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151183.html
