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 }
