console
<div>
<div class="outter">
<div class="boll-outter">
<ul class="boll">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="huan-outter">
<div class="huan-out">
<div class="huan-boll">
<div class="huan-boll-in ball_1"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in ball_2"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in ball_3"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in ball_4"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in ball_5"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in ball_6"></div>
</div>
</div>
</div>
<!--
<div class="huan-outter">
<div class="huan-in">
<div class="huan-boll">
<div class="huan-boll-in"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in"></div>
</div>
<div class="huan-boll">
<div class="huan-boll-in"></div>
</div>
</div>
-->
</div>
.outter{
height:200px;
width:200px;
position:absolute;
transform-style:preserve-3d;
left:45%;
top:30%
}
.boll-outter{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
transform:rotateZ(30deg) rotateX(-20deg);
perspective:1000px
}
.boll:hover{
animation-play-state:paused;
}
.boll{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
animation:boll 10s linear infinite;
margin:0px;
padding:0px;
}
.boll li{
position:absolute;
width:100%;
height:100%;
border-radius:50%;
border:1px solid;
}
.boll li:nth-child(1){transform:rotateY(0)}
.boll li:nth-child(2){transform:rotateY(30deg)}
.boll li:nth-child(3){transform:rotateY(60deg)}
.boll li:nth-child(4){transform:rotateY(90deg)}
.boll li:nth-child(5){transform:rotateY(120deg)}
.boll li:nth-child(6){transform:rotateY(150deg)}
.boll li:nth-child(7){transform:rotateY(180deg)}
.huan-outter{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
perspective:1000px;
perspective-origin: 50% 0%;
backface-visibility:hidden;
}
.huan-in{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
transform:rotateX(80deg);
animation:huan 25s linear infinite;
}
.huan-in .huan-boll{
transform-origin:200px 0px;
height:50px;
width:50%;
//border:1px solid;
position:absolute;
transform-style:preserve-3d;
top: 100px;
left: -100px;
}
.huan-in .huan-boll:nth-child(1){transform:rotateX(-90deg) rotateY(0deg) translateY(-40px) }
.huan-in .huan-boll:nth-child(2){transform:rotateX(-90deg) rotateY(72deg) translateY(-40px)}
.huan-in .huan-boll:nth-child(3){transform:rotateX(-90deg) rotateY(144deg) translateY(-40px)}
.huan-in .huan-boll:nth-child(4){transform:rotateX(-90deg) rotateY(216deg) translateY(-40px)}
.huan-in .huan-boll:nth-child(5){transform:rotateX(-90deg) rotateY(288deg) translateY(-40px)}
.huan-boll-in{
height:50px;
width:50px;
border-radius:50%;
background-color:black;
float:right;
//animation:huan-ball 28s linear 0s infinite;
}
.huan-in:hover{
animation-play-state:paused;
cursor:pointer;
}
.huan-out{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
transform:rotateX(80deg);
animation:huan-out 28s linear 0s infinite;
}
.huan-out .huan-boll{
transform-origin:300px 0px;
height:50px;
width:50%;
//border:1px solid;
position:absolute;
transform-style:preserve-3d;
top: 100px;
left: -200px;
}
.huan-out .huan-boll:nth-child(1){transform: rotateX(-90deg) rotateY(0deg) translateY(-40px)}
.huan-out .huan-boll:nth-child(2){transform: rotateX(-90deg) rotateY(60deg) translateY(-40px)}
.huan-out .huan-boll:nth-child(3){transform: rotateX(-90deg) rotateY(120deg) translateY(-40px)}
.huan-out .huan-boll:nth-child(4){transform: rotateX(-90deg) rotateY(180deg) translateY(-40px)}
.huan-out .huan-boll:nth-child(5){transform: rotateX(-90deg) rotateY(240deg) translateY(-40px)}
.huan-out .huan-boll:nth-child(6){transform: rotateX(-90deg) rotateY(300deg) translateY(-40px)}
.huan-boll-in{
height:50px;
width:50px;
border-radius:50%;
background-color:black;
transform-style:preserve-3d;
float:left;
}
.huan-out:hover{
animation-play-state:paused;
cursor:pointer;
}
.huan-boll-in.ball_1 {
-webkit-transition-delay: 1100ms;
-o-transition-delay: 1100ms;
-moz-transition-delay: 1100ms;
-ms-transition-delay: 1100ms;
transition-delay: 1100ms;
}
.huan-boll-in.ball_2 {
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-o-transition-delay: 900ms;
-ms-transition-delay: 900ms;
transition-delay: 900ms;
}
.huan-boll-in.ball_3 {
-webkit-transition-delay: 700ms;
-o-transition-delay: 700ms;
-ms-transition-delay: 700ms;
-moz-transition-delay: 700ms;
transition-delay: 700ms;
}
.huan-boll-in.ball_4 {
-webkit-transition-delay: 500ms;
-o-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-moz-transition-delay: 500ms;
transition-delay: 500ms;
}
.huan-boll-in.ball_5{
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.huan-boll-in.ball_6 {
-webkit-transition-delay: 100ms;
-o-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.huan-boll-in.ball_1{
-webkit-animation: cir1 28s linear 0s infinite;
-o-animation: cir1 28s linear 0s infinite;
-ms-animation: cir1 28s linear 0s infinite;
-moz-animation: cir1 28s linear 0s infinite;
animation: cir1 28s linear 0s infinite
}
.huan-boll-in.ball_2{
-webkit-animation: cir2 28s linear 0s infinite;
-o-animation: cir2 28s linear 0s infinite;
-ms-animation: cir2 28s linear 0s infinite;
-moz-animation: cir2 28s linear 0s infinite;
animation: cir2 28s linear 0s infinite
}
.huan-boll-in.ball_3{
-webkit-animation: cir3 28s linear 0s infinite;
-o-animation: cir3 28s linear 0s infinite;
-ms-animation: cir3 28s linear 0s infinite;
-moz-animation: cir3 28s linear 0s infinite;
animation: cir3 28s linear 0s infinite
}
.huan-boll-in.ball_4 {
-webkit-animation: cir4 28s linear 0s infinite;
-o-animation: cir4 28s linear 0s infinite;
-ms-animation: cir4 28s linear 0s infinite;
-moz-animation: cir4 28s linear 0s infinite;
animation: cir4 28s linear 0s infinite
}
.huan-boll-in.ball_5{
-webkit-animation: cir5 28s linear 0s infinite;
-o-animation: cir5 28s linear 0s infinite;
-ms-animation: cir5 28s linear 0s infinite;
-moz-animation: cir5 28s linear 0s infinite;
animation: cir5 28s linear 0s infinite
}
.huan-boll-in.ball_6{
-webkit-animation: cir6 28s linear 0s infinite;
-o-animation: cir6 28s linear 0s infinite;
-ms-animation: cir6 28s linear 0s infinite;
-moz-animation: cir6 28s linear 0s infinite;
animation: cir6 28s linear 0s infinite
}
@keyframes boll
{
0%{
transform:rotateX(0) rotateY(0) rotateZ(0deg);
}
100%{
transform:rotateX(0) rotateY(360deg) rotateZ(0deg);
}
}
@-webkit-keyframes boll /*Safari and Chrome*/
{
0%{
transform:rotateX(-30deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform:rotateX(-30deg) rotateY(360deg) rotateZ(0deg);
}
}
@keyframes huan
{
0%{
transform:rotateX(-100deg) rotateY(0) rotateZ(0deg);
}
100%{
transform:rotateX(-100deg) rotateY(0deg) rotateZ(-360deg);
}
}
@-webkit-keyframes huan /*Safari and Chrome*/
{
0%{
transform:rotateX(0) rotateY(0) rotateZ(30deg);
}
100%{
transform:rotateX(0) rotateY(360deg) rotateZ(30deg);
}
}
@keyframes huan-out
{
0%{
transform:rotateX(-100deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform:rotateX(-100deg) rotateY(0deg) rotateZ(360deg);
}
}
@-webkit-keyframes huan-out /*Safari and Chrome*/
{
0%{
transform:rotateX(0) rotateY(0) rotateZ(0deg);
}
100%{
transform:rotateX(0) rotateY(0deg) rotateZ(360deg);
}
}
@-webkit-keyframes cir1 {
0% {
-webkit-transform: rotateY(0deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-360deg) rotateZ(10deg)
}
}
@keyframes cir1 {
0% {
transform: rotateY(0deg) rotateZ(10deg)
}
100% {
transform: rotateY(-360deg) rotateZ(10deg)
}
}
@-webkit-keyframes cir2 {
0% {
-webkit-transform: rotateY(-60deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-420deg) rotateZ(10deg)
}
}
@keyframes cir2 {
0% {
transform: rotateY(-60deg) rotateZ(10deg)
}
100% {
transform: rotateY(-420deg) rotateZ(10deg)
}
}
@-webkit-keyframes cir3 {
0% {
-webkit-transform: rotateY(-120deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-480deg) rotateZ(10deg)
}
}
@keyframes cir3 {
0% {
transform: rotateY(-120deg) rotateZ(10deg)
}
100% {
transform: rotateY(-480deg) rotateZ(10deg)
}
}
@-webkit-keyframes cir4 {
0% {
-webkit-transform: rotateY(-180deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-540deg) rotateZ(10deg)
}
}
@keyframes cir4 {
0% {
transform: rotateY(-180deg) rotateZ(10deg)
}
100% {
transform: rotateY(-540deg) rotateZ(10deg)
}
}
@-webkit-keyframes cir5 {
0% {
-webkit-transform: rotateY(-240deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-600deg) rotateZ(10deg)
}
}
@keyframes cir5 {
0% {
transform: rotateY(-240deg) rotateZ(10deg)
}
100% {
transform: rotateY(-600deg) rotateZ(10deg)
}
}
@-webkit-keyframes cir6 {
0% {
-webkit-transform: rotateY(-300deg) rotateZ(10deg)
}
100% {
-webkit-transform: rotateY(-660deg) rotateZ(10deg)
}
}
@keyframes cir6 {
0% {
transform: rotateY(-300deg) rotateZ(10deg)
}
100% {
transform: rotateY(-660deg) rotateZ(10deg)
}
}