实现天体运转这个小案例，大部分人都喜欢采用canvas，然而，随着css3的越发强大，用纯css已经能够实现很多有意思的小案例，在这里，用css3实现天体运转。当然，用纯css实现，看起来比较傻，但是通过伪元素的使用，以及css自带的动画，可以轻松实现轨迹以及月球。同时由于每个天体代码机会都一样，如果采用LESS等预处理器，那书写将更加简单。
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"/> 5 <meta name="author" content="zhuxu"/> 6 <title>css3实现天体远转</title> 7 <style type="text/css"> 8 *{ 9 margin:0; 10 padding:0; 11 } 12 body{ 13 background-color:#000; 14 overflow:hidden; 15 } 16 .sun,.earth,.moon,.mark,.vnues,.saturn{ 17 position:absolute; 18 left:50%; 19 top:50%; 20 transform:translate(-50%,-50%); 21 border-radius:50%; 22 } 23 .earth::before, .moon::before, .mark::before, .vnues::before, .saturn::before{ 24 content:''; 25 position:absolute; 26 top:50%; 27 transform:translate(-50%,-50%); 28 border-radius:50%; 29 } 30 /*太阳*/ 31 .sun{ 32 width:100px; 33 height:100px; 34 background-color:yellow; 35 box-shadow:0 0 20px 2px red; 36 } 37 /*地球*/ 38 .earth{ 39 width:200px; 40 height:200px; 41 border:1px solid #fff; 42 animation:circle 3s linear infinite; 43 } 44 .earth::before{ 45 width:40px; 46 height:40px; 47 background-color:darkblue; 48 box-shadow:0 0 10px 2px blue; 49 } 50 /*月球*/ 51 .moon{ 52 left:0; 53 width:60px; 54 height:60px; 55 border:0.5px solid #fff; 56 animation:circle 2s linear infinite; 57 } 58 .moon::before{ 59 width:10px; 60 height:10px; 61 border-radius:50%; 62 background-color:#ff9; 63 } 64 /*火星*/ 65 .mars{ 66 width:320px; 67 height:320px; 68 border:1px solid #fff; 69 animation:circle 5s linear infinite; 70 } 71 .mars::before{ 72 width:30px; 73 height:30px; 74 background-color:darkred; 75 box-shadow:0 0 10px 2px red; 76 } 77 /*金星*/ 78 .vnues{ 79 width:430px; 80 height:430px; 81 border:1px solid #fff; 82 animation:circle 8s linear infinite; 83 } 84 .vnues::before{ 85 width:25px; 86 height:25px; 87 background-color:gold; 88 box-shadow:0 0 10px 2px goldenrod; 89 } 90 /*土星*/ 91 .saturn{ 92 width:540px; 93 height:540px; 94 border:1px solid #fff; 95 animation:circle 10s linear infinite; 96 } 97 .saturn::before{ 98 width:40px; 99 height:40px; 100 background-color:wheat; 101 box-shadow:0 0 20px 2px gold; 102 } 103 /*动画*/ 104 @keyframes circle{ 105 0%{ 106 transform: translate(-50%,-50%) rotate(0deg); 107 } 108 100%{ 109 transform: translate(-50%,-50%) rotate(360deg); 110 } 111 } 112 113 </style> 114 </head> 115 <body> 116 <div class="sun></div> 117 <div class="earth"> 118 <div class="moon"></div> 119 </div> 120 <div class="mars"></div> 121 <div class="vnues"></div> 122 <div class="saturn"></div> 123 </body> 124 </html>
接下来采用canvas书写，为了稍微高大上那么一点，采用面向对象
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas实现天体远转</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 width:100%; 13 overflow: hidden; 14 } 15 canvas{ 16 display:block; 17 margin: 10px auto; 18 background-color:#000; 19 } 20 </style> 21 </head> 22 <body> 23 <canvas id="canvas" width="600" height="600">您的浏览器不支持canvas，请升级</canvas> 24 <script type="text/javascript"> 25 var canvas = document.getElementById("canvas"); 26 var ctx = canvas.getContext("2d"); 27 //画轨道 28 drawOrbit(); 29 //创建一个星体对象 30 function drawStar(x,y,r,t,bColor,sColor){ 31 //x,y表示圆心坐标，r为半径，t为周期，bColor,sColor为渐变开始结束颜色 32 this.x = x; 33 this.y = y; 34 this.r = r; 35 this.t= t; 36 this.bColor = bColor; 37 this.sColor = sColor; 38 this.timer = 0; 39 this.color = null; 40 } 41 drawStar.prototype.draw = function(){ 42 ctx.save(); 43 ctx.translate(300,300); 44 /*天体每次旋转的角度*/ 45 ctx.rotate(this.timer*Math.PI*(360/this.t)/180); 46 ctx.beginPath(); 47 ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false); 48 //创建渐变 49 this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r); 50 this.color.addColorStop(0,this.bColor); 51 this.color.addColorStop(0.8,this.sColor); 52 ctx.fillStyle = this.color; 53 ctx.fill(); 54 ctx.restore(); 55 this.timer ++; 56 } 57 58 //为包括太阳在内的九大天体实例化一个天体对象 59 var sun = new drawStar(0,0,20,0,'yellow','red');//天阳 60 var earth = new drawStar(35,0,10,365,'blue','darkblue');//地球 61 var ven = new drawStar(70,0,9,700,'gold','yellow');//金星 62 var mer = new drawStar(105,0,7,1245,'yellow','gold');//水星 63 var mars = new drawStar(140,0,12,1000,'yellow','red');//火星 64 var jup = new drawStar(175,0,18,1400,'white','#ff9');//木星 65 var sat = new drawStar(210,0,12,2000,'yellow','white');//土星 66 var ura = new drawStar(245,0,9,5000,'#fff','#00E');//天王星 67 var nep = new drawStar(280,0,5,10000,'darkblue','#002299');//海王星 68 69 setInterval(move,100);//循环调用move 70 //创建一个move函数，通过循环调用，让星体转动起来 71 function move(){ 72 ctx.clearRect(0,0,600,600); 73 drawOrbit(); 74 sun.draw(); 75 earth.draw(); 76 ven.draw(); 77 mars.draw(); 78 jup.draw(); 79 mer.draw(); 80 sat.draw(); 81 ura.draw(); 82 nep.draw(); 83 } 84 85 86 function drawOrbit(){//轨道函数 87 ctx.strokeStyle = '#ffffff'; 88 for(var i=0; i<8; i++){ 89 ctx.beginPath(); 90 ctx.arc(300,300, 35*(i+1), 0, Math.PI*2, false); 91 ctx.stroke(); 92 } 93 } 94 95 </script> 96 </body> 97 </html>
第一次发，一个前端菜鸟，希望大家不要喷。如果有好的方法的，希望大家提出来。