css3点状旋转加载等待效果
分类：实例代码
分享一个加载等待代码实例，它实现了点状旋转效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.loader {
position: relative;
float: left;
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid #ccc;
}
.loading_1 {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin: -40px;
}
.loading_1 li {
display: block;
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgba(27, 255, 204, 0.82);
}
@keyframes move1 {
50% {
transform: scale(0.4);
opacity: 0.4;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.loading_1 li:nth-child(1) {
top: 0px;
left: 32px;
animation: move1 0.9s ease 0s infinite;
}
.loading_1 li:nth-child(2) {
top: 9px;
left: 54px;
animation: move1 0.9s ease -0.1s infinite;
}
.loading_1 li:nth-child(3) {
top: 32px;
left: 63px;
animation: move1 0.9s ease -0.2s infinite;
}
.loading_1 li:nth-child(4) {
top: 54px;
left: 55px;
animation: move1 0.9s ease -0.3s infinite;
}
.loading_1 li:nth-child(5) {
top: 64px;
left: 32px;
animation: move1 0.9s ease -0.4s infinite;
}
.loading_1 li:nth-child(6) {
top: 54px;
left: 9px;
animation: move1 0.9s ease -0.5s infinite;
}
.loading_1 li:nth-child(7) {
top: 32px;
left: 0px;
animation: move1 0.9s ease -0.6s infinite;
}
.loading_1 li:nth-child(8) {
top: 9px;
left: 9px;
animation: move1 0.9s ease -0.7s infinite;
}
</style>
</head>
<body>
<div class="loader">
<ul class="loading_1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读:
（1）.border-radius可以参阅CSS3 border-radius一章节。
（2）.@keyframes可以参阅CSS3 @keyframes一章节。
（3）.animation可以参阅CSS3 animation一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu