html div 球形,CSS3球形

html {

margin:0px;

padding:0px;

font-family:微软雅黑;

overflow:hidden;

width:100%;

height:100%;

background-color:black

}

#d1 {

position:absolute;

top:30%;

left:40%;

width:300px;

height:300px;

border:2px solid white;

border-radius:50%;

perspective:3000px;

transform:rotateZ(-30deg);

}

#d1:after {

position:absolute;

top:0px;

left:0px;

content:"";

display:block;

width:1px;

height:500px;

background-color:yellow;

transform:translateX(150px) translateY(-100px);

}

#d1 .d1_1 {

height:100%;

transform-style:preserve-3d;

animation:loading 2s linear 0s infinite;

}

#d1 .d1_1 div:nth-child(1) {

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:1px solid red;

transform:rotateY(36deg);

}

#d1 .d1_1 div:nth-child(2) {

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:1px solid green;

transform:rotateY(72deg);

}

#d1 .d1_1 div:nth-child(3) {

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:1px solid blue;

transform:rotateY(108deg);

}

#d1 .d1_1 div:nth-child(4) {

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:1px solid yellow;

transform:rotateY(144deg);

}

#d1 .d1_1 div:nth-child(5) {

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:1px solid #b2850d;

transform:rotateY(180deg);

}

@keyframes loading {

0% {

transform:rotateY(180deg);

}

100% {

transform:rotateY(360deg);

}

}