效果圖:
這裏用到的css3屬性:
transform
animation
transform-style
<body>
<div class="smallbox"></div>
<div id="box">
<div class="box1 one"></div>
<div class="box2 one"></div>
<div class="box3 one"></div>
<div class="box4 one"></div>
<div class="box5 one"></div>
<div class="box6 one"></div>
<div class="box7 one"></div>
<div class="box8 one"></div>
<div class="box9 one"></div>
<div class="box10 one"></div>
<div class="box11 one"></div>
<div class="box12 one"></div>
<div class="box13 one"></div>
<div class="box14 one"></div>
<div class="box15 one"></div>
<div class="box16 one"></div>
<div class="box17 one"></div>
<div class="box1 two"></div>
<div class="box2 two"></div>
<div class="box3 two"></div>
<div class="box4 two"></div>
<div class="box5 two"></div>
<div class="box6 two"></div>
<div class="box7 two"></div>
<div class="box8 two"></div>
<div class="box9 two"></div>
<div class="box10 two"></div>
<div class="box11 two"></div>
<div class="box12 two"></div>
<div class="box13 two"></div>
<div class="box14 two"></div>
<div class="box15 two"></div>
<div class="box16 two"></div>
<div class="box17 two"></div>
<div class="box1 tre"></div>
<div class="box2 tre"></div>
<div class="box3 tre"></div>
<div class="box4 tre"></div>
<div class="box5 tre"></div>
<div class="box6 tre"></div>
<div class="box7 tre"></div>
<div class="box8 tre"></div>
<div class="box9 tre"></div>
<div class="box10 tre"></div>
<div class="box11 tre"></div>
<div class="box12 tre"></div>
<div class="box13 tre"></div>
<div class="box14 tre"></div>
<div class="box15 tre"></div>
<div class="box16 tre"></div>
<div class="box17 tre"></div>
<div class="box1 four"></div>
<div class="box2 four"></div>
<div class="box3 four"></div>
<div class="box4 four"></div>
<div class="box5 four"></div>
<div class="box6 four"></div>
<div class="box7 four"></div>
<div class="box8 four"></div>
<div class="box9 four"></div>
<div class="box10 four"></div>
<div class="box11 four"></div>
<div class="box12 four"></div>
<div class="box13 four"></div>
<div class="box14 four"></div>
<div class="box15 four"></div>
<div class="box16 four"></div>
<div class="box17 four"></div>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
width: 100%;
background: url(images/xk.jpg);
}
#box{
width: 400px;
height: 400px;
position: fixed;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
//設置3d盒子，preserve-3d表示所有子元素在3D空間中呈現。
transform-style: preserve-3d;
}
.box1{
//使用go這個動畫，1秒完成，linear運動是勻速的,infinte無限循環這個運動
animation: go 1s linear infinite;
transform: rotateX(40deg);
}
.box2{
animation: go 2s linear infinite;
transform: rotateX(60deg);
}
.box3{
animation: go 3s linear infinite;
transform: rotateX(80deg);
}
.box4{
animation: go 4s linear infinite;
transform: rotateX(100deg);
}
.box5{
animation: go 5s linear infinite;
transform: rotateX(120deg);
}
.box6{
animation: go 6s linear infinite;
transform: rotateX(140deg);
}
.box7{
animation: go 7s linear infinite;
transform: rotateX(160deg);
}
.box8{
animation: go 8s linear infinite;
transform: rotateX(160deg);
}
.box9{
animation: go 9s linear infinite;
transform: rotateX(180deg);
}
.box10{
animation: go 10s linear infinite;
transform: rotateX(200deg);
}
.box11{
animation: go 11s linear infinite;
transform: rotateX(220deg);
}
.box12{
animation: go 12s linear infinite;
transform: rotateX(240deg);
}
.box13{
animation: go 13s linear infinite;
transform: rotateX(260deg);
}
.box14{
animation: go 14s linear infinite;
transform: rotateX(280deg);
}
.box15{
animation: go 15s linear infinite;
transform: rotateX(320deg);
}
.box16{
animation: go 16s linear infinite;
transform: rotateX(340deg);
}
.box17{
animation: go 17s linear infinite;
transform: rotateX(360deg);
}
.one{
width: 800px;
height: 800px;
position: absolute;
left: -200px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid #53A4F8;
transform-style: preserve-3d;
border-radius: 50%;
box-shadow: 0 0 50px #fff;
}
.two{
width: 700px;
height: 700px;
position: absolute;
left: -100px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid #53A4F8;
transform-style: preserve-3d;
border-radius: 50%;
box-shadow: 0 0 50px #53A4F8;
}
.tre{
width: 600px;
height: 600px;
position: absolute;
left: -50px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid #53A4F8;
transform-style: preserve-3d;
border-radius:50%;
box-shadow: 0 0 50px #53A4F8;
}
.four{
width: 500px;
height: 500px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid #53A4F8;
transform-style: preserve-3d;
border-radius:50%;
box-shadow: 0 0 50px #53A4F8;
}
.smallbox{
width: 200px;
height: 200px;
position: absolute;
left: -400px;
right: 0;
top: -400px;
bottom: 0;
margin: auto;
border-radius:50%;
border: 1px solid transparent;
box-shadow: 200px 200px 50px #fff;
z-index: 9999;
}
//設置一個的動畫，0是開始時，100%是結束時。
@keyframes go{
0%{
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
背景圖：
