vue动态模拟展示太阳系行星运动轨迹及距离大小代码-html代码-BFW代码库

vue动态模拟展示太阳系行星运动轨迹及距离大小代码

代码语言：html

所属分类：动画

代码描述：vue动态模拟展示太阳系行星运动轨迹及距离大小代码，可切换不同的视图、还可模拟行星运行轨迹动画、设置修改参数等。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

     <style>
     
body {
  overflow: hidden;
  background: black; }

.planet_container,
.planet,
.satellite_container,
.satellite,
.sun {
  transition: all ease 2s; }

.sun {
  position: absolute;
  border-radius: 50%; }

.planet_container {
  position: absolute;
  border-radius: 50%;
  transform-origin: center; }
  .planet_container .planet {
    border-radius: 50%;
    position: absolute;
    cursor: pointer; }
    .planet_container .planet .satellite_container {
      position: absolute;
      border: solid;
      border-width: 1px 0 0 1px;
      border-radius: 50%; }
      .planet_container .planet .satellite_container .satellite {
        position: absolute;
        border-radius: 50%; }

.planet_container-SPEED,
.planet_container-DISTANCE {
  transition: all ease 2s, box-shadow ease 0.6s; }
  .planet_container-SPEED:hover,
.planet_container-DISTANCE:hover {
    box-shadow: 0 0 25px white !important; }
    .planet_container-SPEED:hover .planet,
.planet_container-DISTANCE:hover .planet {
      box-shadow: 0 0 25px white !important; }

.planet-WIDTH {
  transition: all ease 2s, box-shadow ease 0.6s; }
  .planet-WIDTH:hover {
    box-shadow: 0 0 25px white !important; }

.action-container {
  z-index: 999;
  position: absolute;
  color: white; }
  .action-container div {
    margin-top: 10px; }
  .action-container button {
    padding: 10px 15px;
    margin-left: 10px; }
  .action-container input {
    margin-left: 13px; }
    .action-container input[type="number"] {
      width: 50px; }

.information-container {
  z-index: 999;
  position: absolute;
  color: white;
  right: 15px;
  bottom: 15px;
  border: solid 1px grey;
  border-radius: 15px;
  padding: 0 20px 10px.........完整代码请登录后点击上方下载按钮下载查看