1.让我们先来看下效果:
2.HTML结构:
<div class="loading">
<div class="text">Loading....</div>
<div class="wrapper">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesup2">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesup3">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
3.接着我们理一下思路:
- 很明显有三层的div,最外层的loading容器是为了让内部的div(.text .circleup)居中显示,内部的circleup是为了方便选择和给内部的.cirle提供定位;
- 首先将loading定位到居中的位置(可以随意定位),再将.text定位到居中位置,再将内部的.circleup定位相对于left居中,top为0的位置,最后将最里面的.circle定位到.circleup相对于left居中,bottom为-10px(为.circle小圆的height的一半)的位置,如下图所示:
- 重点来了!!!我们控制.circleup分别旋转120度、240度、360度。然后控制最内部的.circle围绕.cilcleup的中心旋转360度,注意控制最内部.circle的animation的延时时间。
3.具体的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
width: 100%;
font-family: 'Open Sans';
overflow: hidden;
background: #403833;
font-weight: 100;
color: #f2f2f2;
font-size: 100%;
}
*{
margin: 0;
padding: 0;
}
.loading{
position: relative;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 400px;
}
.text{
animation: scaleSmall 2s infinite;
}
.wrapper{
width: 100%;
height: 100%;
}
.circlesup{
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100%;
transform-origin: center center;
transform: rotate(120deg);
}
.circlesup2{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
transform-origin: center center;
transform: rotate(240deg);
}
.circlesup3{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
transform-origin: center center;
transform: rotate(360deg);
}
.circle{
position: absolute;
left: 25%;
top: 0;
width: 50%;
height: 50%;
transform-origin: 50% 50%;
animation: test 2s infinite;
}
.circle:nth-child(1){
z-index: 5;
}
.circle:nth-child(2){
animation: test 2s .125s infinite;
}
.circle:nth-child(3){
animation: test 2s .25s infinite;
}
.circle:nth-child(4){
animation: test 2s .375s infinite;
}
.circle:nth-child(5){
animation: test 2s .5s infinite;
}
.circle:after{
content: "";
position: absolute;
width: 20%;
height: 20%;
left: 40%;
bottom: -10%;
border-radius: 50%;
}
.circle:nth-child(1):after{
background: #13A3A5;
}
.circle:nth-child(2):after{
background: #56bebf;
transform: scale(0.8,0.8);
}
.circle:nth-child(3):after{
background: #ffa489;
transform: scale(0.6,0.6);
}
.circle:nth-child(4):after{
background: #ff6d37;
transform: scale(0.4,0.4);
}
.circle:nth-child(5):after{
background: #DB2F00;
transform: scale(0.2,0.2);
}
@keyframes test {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
70% {
transform: rotate(360deg);
animation-timing-function: ease-in;
}
100% {
transform: rotate(360deg);
}
}
@keyframes scaleSmall {
0%{
transform: scale(0);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="text">Loading....</div>
<div class="wrapper">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesup2">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesup3">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>