纯css模拟太阳系行星运行轨迹动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css模拟太阳系行星运行轨迹动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  background: #111;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* Container */
.b-system {
  display: block;
  width: 100vh;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  background: radial-gradient(#6f4500 0%, #320 30%, #111 60%);
  /* Describing common properties */
}
.b-system__object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Info box */
  /* Draw disc */
  /* Draw orbit */
  /* Draw Sun and planets */
}
.b-system__object__about {
  display: none;
  position: absolute;
  background: #FFF;
  width: 33vh;
  padding: 1vh;
  color: #333;
  font: normal 1.2vh/1.6vh sans-serif;
  text-align: justify;
  left: 50%;
}
.b-system__object:hover > .b-system__object__about {
  display: block;
}
.b-system__object::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 1vh;
  height: 1vh;
  border-radius: 5vh;
  background: #F00;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.b-system__object::before {
  content: "";
  display: block;
  border-radius: 100vh;
  width: 5vh;
  height: 5vh;
  border: 0.3vh solid rgba(0, 0, 0, 0.25);
}
.b-system__object_sun {
  z-index: 9;
}
.b-system__object_sun::after {
  width: 3vh;
  height: 3vh;
  background: #ffb100;
}
.b-system__object_sun::before {
  display: none;
}
.b-system__object_mercury {
  z-index: 8;
}
.b-system__object_mercury::after {
  background: #a60;
  margin: -0.5vh 0 0 -0.5vh;
  animation: orb-mercury 1s linear infinite;
  -webkit-animation: orb-mercury 1s linear infinite;
}
.b-system__object_venus {
  z-index: 7;
}
.b-system__object_venus::after {
  background: #9ac;
  width: 1.5vh;
  height: 1.5vh;
  margin: -0.75vh 0 0 -0.75vh;
  animation: orb-venus 2.6s linear infinite;
  -webkit-animation: orb-venus 2.6s linear infinite;
}
.b-system__object_venus::before {
  width: 8vh;
  height: 8vh;
}
.b-system__object_earth {
  z-index: 6;
}
.b-system__object_earth::after {
  background: #07a;
  width: 1.8vh;
  height: 1.8vh;
  margin: -0.9vh 0 0 -0.9vh;
  animation: orb-earth 4.1s linear infinite;
  -webkit-animation: orb-earth 4.1s linear infinite;
}
.b-system__object_earth::before {
  width: 12vh;
  height: 12vh;
}
.b-system__object_mars {
  z-index: 5;
}
.b-system__object_mars::after {
  background: #b30;
  width: 1.3vh;
  height: 1.3vh;
  margin: -0.65vh 0 0 -0.65vh;
  animation: orb-mars 7.8s linear infinite;
  -webkit-animation: orb-mars 7.8s linear infinite;
}
.b-system__object_mars::before {
  width: 16vh;
  height: 16vh;
}
.b-system__object_belt {
  z-index: 4;
}
.b-system__object_belt::after {
  content: "";
  display: block;
  background: none;
  width: 20vh;
  height: 20vh;
  border: 1vh dotted #543;
  border-radius: 11vh;
  position: absolute;
  left: 1vh;
  top: 1vh;
  animation: spinA 20s linear infinite;
  -webkit-animation: spinA 20s linear infinite;
}
.b-system__object_belt::before {
  content: "";
  display: block;
  background: none;
  width: 20vh;
  height: 20vh;
  border: 2vh dotted #432;
  border-radius: 12vh;
  animation: spinB 35s linear infinite;
  -webkit-animation: spinB 35s linear infinite;
}
.b-system__object_jupiter {
  z-index: 3;
}
.b-system__object_jupiter::after {
  background: #a68876;
  width: 4vh;
  height: 4vh;
  margin: -2vh 0 0 -2vh;
  animation: orb-jupiter 49.2s linear infinite;
  -webkit-animation: orb-jupiter 49.2s linear infinite;
}
.b-system__object_jupiter::before {
  width: 30vh;
  height: 30vh;
}
.b-system__object_saturn {
  z-index: 2;
}
.b-system__object_saturn::after {
  background: radial-gradient(#a59678 0%, #a59678 40%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0) 49%, #646464 50%);
  width: 5vh;
  height: 5vh;
  margin: -2.5vh 0 0 -2.5vh;
  animation: orb-saturn 122.3s linear infinite;
  -webkit-animation: orb-saturn 122.3s linear infinite;
}
.b-system__object_saturn::before {
  width: 40vh;
  height: 40vh;
}
.b-system__object_uranus {
  z-index: 1;
}
.b-system__object_uranus::after {
  background: #80aaac;
  width: 2.8vh;
  height: 2.8vh;
  margin: -1.4vh 0 0 -1.4vh;
  animation: orb-uranus 348.7s linear infinite;
  -webkit-animation: orb-uranus 348.7s linear infinite;
}
.b-system__object_uranus::before {
  width: 52vh;
  height: 52vh;
}
.b-system__object_neptune {
  z-index: 0;
}
.b-system__object_neptune::after {
  background: #36569f;
  width: 2.6vh;
  height: 2.6vh;
  margin: -1.3vh 0 0 -1.3vh;
  animation: orb-neptune 684s linear infinite;
  -webkit-animation: orb-neptune 684s linear infinite;
}
.b-system__object_neptune::before {
  width: 60vh;
  height: 60vh;
}
/* Animation */
@keyframes orb-mercury {
  from {
    transform: rotate(0deg) translate(2.5vh);
  }
  to {
    transform: rotate(360deg) translate(2.5vh);
  }
}
@-webkit-keyframes orb-mercury {
  from {
    transform: rotate(0deg) translate(2.5vh);
  }
  to {
    transform: rotate(360deg) translate(2.5vh);
  }
}
@keyframes orb-venus {
  from {
    transform: rotate(0deg) translate(4vh);
  }
  to {
    transform: rotate(360deg) translate(4vh);
  }
}
@-webkit-keyframes orb-venus {
  from {
    transform: rotate(0deg) translate(4vh);
  }
  to {
    transform: rotate(360deg) translate(4vh);
  }
}
@keyframes orb-earth {
  from {
    transform: rotate(0deg) translate(6vh);
  }
  to {
    transform: rotate(360deg) translate(6vh);
  }
}
@-webkit-keyframes orb-earth {
  from {
    transform: rotate(0deg) translate(6vh);
  }
  to {
    transform: rotate(360deg) translate(6vh);
  }
}
@keyframes orb-mars {
  from {
    transform: rotate(0deg) translate(8vh);
  }
  to {
    transform: rotate(360deg) translate(8vh);
  }
}
@-webkit-keyframes orb-mars {
  from {
    transform: rotate(0deg) translate(8vh);
  }
  to {
    transform: rotate(360deg) translate(8vh);
  }
}
@keyframes orb-jupiter {
  from {
    transform: rotate(0deg) translate(15vh);
  }
  to {
    transform: rotate(360deg) translate(15vh);
  }
}
@-webkit-keyframes orb-jupiter {
  from {
    transform: rotate(0deg) translate(15vh);
  }
  to {
    transform: rotate(360deg) translate(15vh);
  }
}
@keyframes orb-saturn {
  from {
    transform: rotate(0deg) translate(20vh);
  }
  to {
    transform: rotate(360deg) translate(20vh);
  }
}
@-webkit-keyframes orb-saturn {
  from {
    transform: rotate(0deg) translate(20vh);
  }
  to {
    transform: rotate(360deg) translate(20vh);
  }
}
@keyframes orb-uranus {
  from {
    transform: rotate(0deg) translate(26vh);
  }
  to {
    transform: rotate(360deg) translate(26vh);
  }
}
@-webkit-keyframes orb-uranus {
  from {
    transform: rotate(0deg) translate(26vh);
  }
  to {
    transform: rotate(360deg) translate(26vh);
  }
}
@keyframes orb-neptune {
  from {
    transform: rotate(0deg) translate(30vh);
  }
  to {
    transform: rotate(360deg) translate(30vh);
  }
}
@-webkit-keyframes orb-neptune {
  from {
    transform: rotate(0deg) translate(-30vh);
  }
  to {
    transform: rotate(360deg) .........完整代码请登录后点击上方下载按钮下载查看