1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <link href="css/demo.css" rel="stylesheet" />
7 </head>
8 <body>
9 <div class="ball-box">
10 <div class="ball">
11 <div class="line-1"></div>
12 <div class="line-2"></div>
13 <div class="line-3"></div>
14 <div class="line-4"></div>
15 <div class="line-5"></div>
16 </div>
17 </div>
18 </body>
19 </html> 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 } 
