Jquery+Css实现行星运动源码分享_星球jquery.-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44739881/article/details/96591010

本文分享了一个利用Jquery和Css实现的行星运动的源码示例，包括html、css和js代码段，适合学习和借鉴。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css+jquery实现行星运动源码分享

在菜鸟教程上挖到的小例子，自己玩着改了改，分享一波源码。
在这里插入图片描述
html部分

<div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury planet'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus planet'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth planet'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars planet'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter planet'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn planet'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus planet'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune planet'></div>
  <div class="fast" οnclick="fast(planets);" style="height: 20px;width: 50px; background-color: red; filter:Alpha(opacity=50);opacity:0.8;color: #fff" >faster</div>
  <div class="slow" οnclick="slow(planets);" style="height: 20px;width: 50px; background-color: green; filter:Alpha(opacity=50); opacity:0.8;color: #fff" >slower</div>
  <div class="wind" οnclick="wind();" style="height: 20px;width: 50px; background-color: red; filter:Alpha(opacity=50); opacity:0.8;color: #fff" >风扇f</div>
</div>

css部分

.solarsys{
  height: 800px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
  left:357px;
  top:357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
  left:337.5px;
  top:395px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 62.5px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/
.mercuryOrbit {
  left:342.5px;
  top:342.5px;
  height: 115px;
  width: 115px;
  background-color: transparent;
  border-radius: 50%;
  b