javaScript和CSS制作星球运行轨迹

最新推荐文章于 2024-12-30 14:14:25 发布

原创最新推荐文章于 2024-12-30 14:14:25 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文通过HTML和CSS实现了一个太阳系行星运动的模拟系统，详细介绍了各行星的运动轨迹及速度变化，为读者展示了太阳系行星围绕太阳旋转的动态效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: black;
}
#xi1{width:800px; height:800px; border-radius:50%; border:1px dashed #ccc; position:relative;top:100px;left:100px;}
#ri{ width:80px; height:80px; border-radius:50%; background:red; position:absolute; left:360px; top:360px; box-shadow:0px 0px 70px red; }
#water{ width:13px; height:13px; background:#CCC; position:absolute; border-radius:50%; left:6px; top:6px; transform-origin:43px 42px; transform:rotate(0deg); box-shadow:0px 0px 10px #CCC; }
#water1{ width:100px; height:100px; border-radius:50%; border:1px solid #ccc; position:absolute; left:350px; top:350px; }
#jin{ width:13px; height:13px; background:#A08358; position:absolute; border-radius:50%; left:16px; top:16px; transform-origin:60px 60px; transform:rotate(0deg); box-shadow:0px 0px 20px #A08358; }
#jin1{ width:150px; height:150px; border-radius:50%; border:1px solid #ccc; position:absolute; left:325px; top:325px; }
#earth{ width:18px; height:18px; background:#0D3B62; position:absolute; border-radius:50%; left:28px; top:28px; transform-origin:98px 96px; transform:rotate(0deg); box-shadow:0px 0px 20px #0D3B62; }
#earth1{ width:250px; height:250px; border-radius:50%; border:1px solid #ccc; position:absolute; left:275px; top:275px; }
#yue{ width:13px; height:13px; background:#747471; position:absolute; border-radius:50%; left:34px; top:34px; transform-origin:106px 107px; transform:rotate(0deg); box-shadow:0px 0px 10px #747471; }
#yue1{ width:280px; height:280px; border-radius:50%; border:1px solid gray; position:absolute; left:260px; top:260px; }
#huo{ width:26px; height:26px; background:#DA3C00; position:absolute; border-radius:50%; left:36px; top:36px; transform-origin:130px 130px; transform:rotate(0deg); box-shadow:0px 0px 10px #DA3C00; }
#huo1{ width:330px; height:330px; border-radius:50%; border:1px solid gray; position:absolute; left:235px; top:235px; }
#mu{ width:40px; height:40px; background:#EAEA93; position:absolute; border-radius:50%; left:46px; top:46px; transform-origin:177px 174px; transform:rotate(0deg); box-shadow:0px 0px 20px #EAEA93; }
#mu1{ width:450px; height:450px; border-radius:50%; border:1px solid gray; position:absolute; left:175px; top:175px; }
#tu{ width:40px; height:40px; background:#A27634; position:absolute; border-radius:50%; left:58px; top:58px; transform-origin:210px 210px; transform:rotate(0deg); box-shadow:0px 0px 10px #A27634; }
#tu1{ width:540px; height:540px; border-radius:50%; border:1px solid gray; position:absolute; left:130px; top:130px; }
#tw{ width:48px; height:48px; background:#395A67; position:absolute; border-radius:50%; left:66px; top:66px; transform-origin:256px 256px; transform:rotate(0deg); box-shadow:0px 0px 10px #395A67; }
#tw1{ width:640px; height:640px; border-radius:50%; border:1px solid gray; position:absolute; left:80px; top:80px; }
#hw{ width:56px; height:56px; background:#509DBC; position:absolute; border-radius:50%; left:90px; top:90px; transform-origin:315px 310px; transform:rotate(0deg); box-shadow:0px 0px 20px #509DBC; }
#hw1{ width:800px; height:800px; border-radius:50%; border:1px solid gray; position:absolute; left:0px; top:0px; }
</style>
</head>
<body>
<div id="xi1">
<div id="ri"></div>
<div id="water1"><div id="water"></div></div>
<div id="jin1"><div id="jin"></div></div>
<div id="earth1"><div id="earth"></div></div>
<div id="yue1"><div id="yue"></div></div>
<div id="huo1"><div id="huo"></div></div>
<div id="mu1"><div id="mu"></div></div>
<div id="tu1"><div id="tu"></div></div>
<div id="tw1"><div id="tw"></div></div>
<div id="hw1"><div id="hw"></div></div>
</div>
<script>
//获取九大行星
var yue = document.getElementById('hw');
var tw = document.getElementById('tw');
var tu = document.getElementById('tu');
var mu = document.getElementById('mu');
var huo = document.getElementById('huo');
var yue = document.getElementById('yue');
var earth = document.getElementById('earth');
var jin = document.getElementById('jin');
var water = document.getElementById('water');

var jd= 0;
var jd_1= 0;
var jd_2= 0;
var jd_3= 0;
var jd_4= 0;
var jd_5= 0;
var jd_6= 0;
var jd_7= 0;
var jd_8= 0;
function autoRun_1 (){//匿名函数来调用计时器
run = setInterval(function(){
jd+=0.16;//让角度每次+10;
jd_1+=0.1;
jd_2+=0.12;
jd_3+=0.14;
jd_4+=0.21;
jd_5+=0.17;
jd_6+=0.1;
jd_7+=0.12;
jd_8+=0.13;
hw.style.transform = 'rotate('+jd+'deg)';//重新赋值给行星的角度
tw.style.transform = 'rotate('+jd_1+'deg)';
tu.style.transform = 'rotate('+jd_2+'deg)';
mu.style.transform = 'rotate('+jd_3+'deg)';
huo.style.transform = 'rotate('+jd_4+'deg)';
yue.style.transform = 'rotate('+jd_5+'deg)';
earth.style.transform = 'rotate('+jd_6+'deg)';
jin.style.transform = 'rotate('+jd_7+'deg)';
water.style.transform = 'rotate('+jd_8+'deg)';

},1)
}
autoRun_1();

</script>
</body>
</html>