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 20px;
  font-size: 14px; }
  .information-container .name {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.4rem; }

@keyframes gravitation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

      </style>
</head>
<body>
    <div id="app">
      
	<div id="app">
		<!-- MAIN CONTENT  -->
		<div class="sun" :style="sunStyle()"></div>
		<div
			class="planet_container"
			:class="`planet_container-${mode}`"
			v-for="(p, i) in planetsFiltered"
			:style="planetContainerStyle(i)"
			@click="onClickPlanetContainer(i)"
		>
			<div
				class="planet"
				:class="`planet-${mode}`"
				:style="planetStyle(i)"
				@click="onClickPlanet(i)"
			>
				<div
					class="satellite_container"
					v-for="(s, j) in p.satellites"
					:style="satelliteContainerStyle(i, j)"
				>
					<div class="satellite" :style="satelliteStyle(i, j)"></div>
				</div>
			</div>
		</div>

		<!-- INFORMATION  -->
		<div class="information-container">
			<p class="name">{{ selectedPlan.........完整代码请登录后点击上方下载按钮下载查看