用纯CSS3或者canvas实现太阳系天体运转
实现天体运转这个小案例，大部分人都喜欢采用canvas，然而，随着css3的越发强大，用纯css已经能够实现很多有意思的小案例，在这里，用css3实现天体运转。当然，用纯css实现，看起来比较傻，但是通过伪元素的使用，以及css自带的动画，可以轻松实现轨迹以及月球。同时由于每个天体代码机会都一样，如果采用LESS等预处理器，那书写将更加简单。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<meta name="author" content="zhuxu"/>
<title>css3实现天体远转</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background-color:#000;
overflow:hidden;
}
.sun,.earth,.moon,.mark,.vnues,.saturn{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}
.earth::before, .moon::before, .mark::before, .vnues::before, .saturn::before{
content:'';
position:absolute;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}
/*太阳*/
.sun{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0 0 20px 2px red;
}
/*地球*/
.earth{
width:200px;
height:200px;
border:1px solid #fff;
animation:circle 3s linear infinite;
}
.earth::before{
width:40px;
height:40px;
background-color:darkblue;
box-shadow:0 0 10px 2px blue;
}
/*月球*/
.moon{
left:0;
width:60px;
height:60px;
border:0.5px solid #fff;
animation:circle 2s linear infinite;
}
.moon::before{
width:10px;
height:10px;
border-radius:50%;
background-color:#ff9;
}
/*火星*/
.mars{
width:320px;
height:320px;
border:1px solid #fff;
animation:circle 5s linear infinite;
}
.mars::before{
width:30px;
height:30px;
background-color:darkred;
box-shadow:0 0 10px 2px red;
}
/*金星*/
.vnues{
width:430px;
height:430px;
border:1px solid #fff;
animation:circle 8s linear infinite;
}
.vnues::before{
width:25px;
height:25px;
background-color:gold;
box-shadow:0 0 10px 2px goldenrod;
}
/*土星*/
.saturn{
width:540px;
height:540px;
border:1px solid #fff;
animation:circle 10s linear infinite;
}
.saturn::before{
width:40px;
height:40px;
background-color:wheat;
box-shadow:0 0 20px 2px gold;
}
/*动画*/
@keyframes circle{
0%{
transform: translate(-50%,-50%) rotate(0deg);
}
100%{
transform: translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun></div>
<div class="earth">
<div class="moon"></div>
</div>
<div class="mars"></div>
<div class="vnues"></div>
<div class="saturn"></div>
</body>
</html>
接下来采用canvas书写，为了稍微高大上那么一点，采用面向对象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>canvas实现天体远转</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
width:100%;
overflow: hidden;
}
canvas{
display:block;
margin: 10px auto;
background-color:#000;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600">您的浏览器不支持canvas，请升级</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//画轨道
drawOrbit();
//创建一个星体对象
function drawStar(x,y,r,t,bColor,sColor){
//x,y表示圆心坐标，r为半径，t为周期，bColor,sColor为渐变开始结束颜色
this.x = x;
this.y = y;
this.r = r;
this.t= t;
this.bColor = bColor;
this.sColor = sColor;
this.timer = 0;
this.color = null;
}
drawStar.prototype.draw = function(){
ctx.save();
ctx.translate(300,300);
/*天体每次旋转的角度*/
ctx.rotate(this.timer*Math.PI*(360/this.t)/180);
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
//创建渐变
this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
this.color.addColorStop(0,this.bColor);
this.color.addColorStop(0.8,this.sColor);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
this.timer ++;
}
//为包括太阳在内的九大天体实例化一个天体对象
var sun = new drawStar(0,0,20,0,'yellow','red');//天阳
var earth = new drawStar(35,0,10,365,'blue','darkblue');//地球
var ven = new drawStar(70,0,9,700,'gold','yellow');//金星
var mer = new drawStar(105,0,7,1245,'yellow','gold');//水星
var mars = new drawStar(140,0,12,1000,'yellow','red');//火星
var jup = new drawStar(175,0,18,1400,'white','#ff9');//木星
var sat = new drawStar(210,0,12,2000,'yellow','white');//土星
var ura = new drawStar(245,0,9,5000,'#fff','#00E');//天王星
var nep = new drawStar(280,0,5,10000,'darkblue','#002299');//海王星
setInterval(move,100);//循环调用move
//创建一个move函数，通过循环调用，让星体转动起来
function move(){
ctx.clearRect(0,0,600,600);
drawOrbit();
sun.draw();
earth.draw();
ven.draw();
mars.draw();
jup.draw();
mer.draw();
sat.draw();
ura.draw();
nep.draw();
}
function drawOrbit(){//轨道函数
ctx.strokeStyle = '#ffffff';
for(var i=0; i<8; i++){
ctx.beginPath();
ctx.arc(300,300, 35*(i+1), 0, Math.PI*2, false);
ctx.stroke();
}
}
</script>
</body>
</html>
第一次发，一个前端菜鸟，希望大家不要喷。如果有好的方法的，希望大家提出来。
版权声明：本文为zhuxu613原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。