<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3旋转动画</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
body{background: radial-gradient(circle at center, #34679a 0%,#214163 47%,#0d1926 100%);}
.con{300px;height:300px;margin:0 auto;position:relative;margin:0 auto;}
.con .box{transform-style: preserve-3d; 200px;height:200px;border:1px solid #fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(20deg);position:absolute;left:0;top:0;}
.con .box2{-webkit-transform:rotateX(80deg) rotateY(20deg);}
.con .box3{-webkit-transform:rotateX(-70deg) rotateY(60deg);}
.con .box4{-webkit-transform:rotateX(70deg) rotateY(60deg);}
.center{-webkit-animation:centerGo 2s infinite linear;40px;height:40px;background:#fff;position:absolute;left:81px;top:82px;border-radius:50%;box-shadow:0 0 20px #fff;}
@-webkit-keyframes centerGo{
0%{
box-shadow:0 0 0 transparent;
}
50%{
box-shadow:0 0 20px #fff;
}
100%{
box-shadow:0 0 0 transparent;
}
}
.box .point{animation:point 2s infinite linear;200px;height:200px;position:relative;transform-style: preserve-3d;}
.point:after{animation:pointAfter 2s infinite linear;content:"";5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;position:absolute;left:24%;top:13px;z-index:999;}
.box2 .point,.box2 .point:after{-webkit-animation-delay:-.5s;}
.box3 .point,.box3 .point:after{-webkit-animation-delay:-1.5s;}
.box4 .point,.box4 .point:after{-webkit-animation-delay:-2s;}
@-webkit-keyframes point{
from{
transform:rotateZ(0deg);
}to{
transform:rotateZ(360deg);
}
}
@-webkit-keyframes pointAfter{
from {
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
} to {
-webkit-transform: rotateX(90deg) rotateY(-360deg);
transform: rotateX(90deg) rotateY(-360deg);
}
}
</style>
</head>
<body>
<div class="con">
<div class="center"></div>
<div class="box box1">
<div class="point"></div>
</div>
<div class="box box2">
<div class="point"></div>
</div>
<div class="box box3">
<div class="point"></div>
</div>
<div class="box box4">
<div class="point"></div>
</div>
</div>
</body>
</html>
