1  2  3  4 
      5      6     
      7  8  9     
     
      10         
      
       11             
       
12             
       
13             
       
14             
       
15             
       
16         
      
17     
     
18 19 

1 body { 2     background-color:#000; 3 } 4 .ball-box{ 5     height:300px; 6     width:300px; 7     position:absolute; 8     top:50%; 9     left:50%;10     margin:-150px 0px 0px -150px;11     perspective:3000px;/*透镜，类似于焦距，焦距越小，成像越大*/12 }13 .ball{14     height:100%;15     transform-style:preserve-3d;/*设置3d属性*/16     animation:rotate3d 20s infinite linear;/*动画名称，动画执行周期所在时间，播放次数，速度*/17 }18 @-webkit-keyframes rotate3d{19     0%{20         transform:rotateY(0deg);21     }22     100%{23         transform:rotateY(360deg);24     }25 }26 .ball>div{27     border:solid 2px #fff;28     height:100%;29     width:100%;30     position:absolute;31     border-radius:100%;/*设置为圆*/32 }33 .line-1{34     transform:rotateY(0deg);35 }36 .line-2{37     transform:rotateY(36deg);38 }39 .line-3{40     transform:rotateY(72deg);41 }42 .line-4{43     transform:rotateY(108deg);44 }45 .line-5{46     transform:rotateY(144deg);47 }48 .ball::after{49     content:"";50     width:1px;51     height:500px;52     background-color:#ff0;53     display:block;54     transform:translateX(150px) translateY(-100px);55 }