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

纯css模拟太阳系行星运行轨迹动画效果

代码语言：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-eart.........完整代码请登录后点击上方下载按钮下载查看