立体线框球形动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#000;
}
.box-ball{
width:300px;
height:300px;
position: absolute;
left:50%;
top:50%;
margin:-150px;
perspective-origin:50% 50%;
perspective:3000px;
}
.box{
height:100%;
transform-style: preserve-3d;
animation:rotate3D 30s infinite linear;
transform:rotateZ(-30deg) rotateY(0deg);
}
@-webkit-keyframes rotate3D{
0{transform:rotateZ(-30deg) rotateY(0deg);}
100%{transform:rotateZ(-30deg) rotateY(360deg);}
}
.box:after{
content: "";
width:1px;
height:500px;
background:#ff0;
display: block;
position:absolute;
left:0;
top:0;
transform:translate(150px,-100px);
}
.box>div{
border:1px solid #fff;
position: absolute;
width:100%;
height:100%;
border-radius:100%;
}
.box .box1{transform:rotateY(0);}
.box .box2{transform:rotateY(36deg);}
.box .box3{transform:rotateY(72deg);}
.box .box4{transform:rotateY(108deg);}
.box .box5{transform:rotateY(144deg);}
</style>
</head>
<body>
<div class="box-ball">
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>
</body>
</html>
