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

代码语言：html
所属分类：动画
代码描述：纯css模拟太阳系行星运行轨迹动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
html, body {
  background: #222;
  overflow: hidden;
  height: 100%;
}

.container {
  margin: 250px auto;
  width: 768px;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.sun {
  background: -webkit-gradient(linear, left top, right top, from(#BB513E), to(#994233));
  background: linear-gradient(90deg, #BB513E, #994233);
  box-shadow: inset 15px 10px 0px #994233;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin: 105px auto;
  position: absolute;
  left: 0;
  right: 0;
}

.mercury {
  background: -webkit-gradient(linear, left top, right top, from(#453217), to(#2a1f0e));
  background: linear-gradient(90deg, #453217, #2a1f0e);
  box-shadow: inset 0px 7px 0px #2a1f0e;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 10px;
}

.venus {
  background: -webkit-gradient(linear, left top, right top, from(#AC6339), to(#915430));
  background: linear-gradient(90deg, #AC6339, #915430);
  box-shadow: inset 0px 7px 0px #7e492a;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 30px;
}

.earth {
  background: -webkit-gradient(linear, left top, right top, from(#3E8EBB), to(#357aa0));
  background: linear-gradient(90deg, #3E8EBB, #357aa0);
  box-shadow: inset 0px 7px 0px #2f6b8d;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 70px;
}

.mars {
  background: -webkit-gradient(linear, left top, right top, from(#6F3125), to(#54251c));
  background: linear-gradient(90deg, #6F3125, #54251c);
  box-shadow: inset 0px 7px 0px #4d221a;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 110px;
}

.jupiter {
  background: -webkit-gradient(linear, left top, right top, from(#3D2C14), to(#22190b));
  background: linear-gradient(90deg, #3D2C14, #22190b);
  box-shadow: inset 0px 7px 0px #2a1e0e;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 160px;
}

.saturn {
  background: -webkit-gradient(linear, left top, right top, from(#E97340), to(#e55c20));
  background: linear-gradient(90deg, #E97340, #e55c20);
  box-shadow: inset 0px 7px 0px #ca4d17;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 200px;
}

.uranus {
  background: -webkit-gradient(linear, left top, right top, from(#337799), to(#2a627e));
  background: linear-gradient(90deg, #337799, #2a627e);
  box-shadow: inset 0px 7px 0px #24536b;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 240px;
}

.neptune {
  background: -webkit-gradient(linear, left top, right top, from(#6ACDC0), to(#4fc4b5));
  background: linear-gradient(90deg, #6ACDC0, #4fc4b5);
  box-shadow: inset 0px 7px 0px #38a899;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 280px;
}

.pluto {
  background: -webkit-gradient(linear, left top, right top, from(#C6C053), to(#b8b23d));
  background: linear-gradient(90deg, #C6C053, #b8b23d);
  box-shadow: inset 0px 7px 0px #a59f37;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-top: 320px;
}

[class*="-orbit"] {
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid #333;
  box-shadow: 0px 1px 1px #4096EE;
  border-radius: 100%;
}

.mercurys-orbit {
  width: 100px;
  height: 100px;
  margin: 85px auto;
  -webkit-animation: gravity 0.60057s linear infinite;
          animation: gravity 0.60057s linear infinite;
}

.venus-orbit {
  width: 170px;
  height: 170px;
  margin: 50px auto;
  -webkit-animation: gravity 3.3365s linear infinite;
          animation: gravity 3.3365s linear infinite;
}

.earths-orbit {
  width: 270px;
  height: 270px;
  margin: 0px auto;
  -webkit-animation: gravity 6.673s linear infinite;
          animation: gravity 6.673s linear infinite;
}

.mars-orbit {
  width: 370px;
  height: 370px;
  margin: -50px auto;
  -webkit-animation: gravity 10.0095s linear infinite;
          animation: gravity 10.0095s linear infinite;
}

.jupiters-orbit {
  width: 470px;
  height: 470px;
  margin: -100px auto;
  -webkit-animation: gravity 13.346s linear infinite;
          animation: gravity 13.346s linear infinite;
}

.saturns-orbit {
  width: 570px;
  height: 570px;
  margin: -150px auto;
  -webkit-animation: gravity 20.019s linear infinite;
          animation: gravity 20.019s linear infinite;
}

.uranus-orbit {
  width: 670px;
  height: 670px;
  margin: -200px auto;
  -webkit-animation: gravity 26.692s linear infinite;
          animation: gravity 26.692s linear infinite;
}

.neptunes-orbit {
  width: 770px;
  height: 770px;
  margin: -250px auto;
  -webkit-animation: gravity 33.365s linear infinite;
          animation: gravity 33.365s linear infinite;
}

.plutos-orbit {
  width: 870px;
  height: 870px;
  margin: -300px auto;
  margin-left: -50px;
  -webkit-animation: gravity 40.038s linear infinite;
          animation: gravity 40.038s linear infinite;
}

.star-container {
  -webkit-animation: gravity 200s linear infinite;
          animation: gravity 200s linear infinite;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: -200px 0;
}

.star {
  background: #FFF;
  border-radius: 100px;
  width: 1px;
  height: 1px;
  position: absolute;
  -webkit-filter: brightness(5);
          filter: brightness(5);
}

.star:nth-of-type(1) {
  margin-left: 1007px;
  margin-top: 137px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(2) {
  margin-left: 3155px;
  margin-top: 466px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(3) {
  margin-left: 1447px;
  margin-top: 213px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(4) {
  margin-left: 2174px;
  margin-top: 209px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(5) {
  margin-left: 1888px;
  margin-top: 532px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(6) {
  margin-left: 2756px;
  margin-top: 307px;
  -webkit-animation: flash 6s linear infinite;
          animation: flash 6s linear infinite;
}

.star:nth-of-type(7) {
  margin-left: 713px;
  margin-top: 624px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(8) {
  margin-left: 3656px;
  margin-top: 545px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(9) {
  margin-left: 2018px;
  margin-top: 447px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(10) {
  margin-left: 3277px;
  margin-top: 671px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(11) {
  margin-left: 525px;
  margin-top: 896px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(12) {
  margin-left: 1284px;
  margin-top: 667px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(13) {
  margin-left: 2107px;
  margin-top: 630px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(14) {
  margin-left: 3889px;
  margin-top: 548px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(15) {
  margin-left: 2327px;
  margin-top: 220px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(16) {
  margin-left: 945px;
  margin-top: 870px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(17) {
  margin-left: 617px;
  margin-top: 782px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(18) {
  margin-left: 3371px;
  margin-top: 559px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(19) {
  margin-left: 1682px;
  margin-top: 361px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(20) {
  margin-left: 117px;
  margin-top: 459px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(21) {
  margin-left: 1357px;
  margin-top: 696px;
  -webkit-animation: flash 6s linear infinite;
          animation: flash 6s linear infinite;
}

.star:nth-of-type(22) {
  margin-left: 2218px;
  margin-top: 173px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(23) {
  margin-left: 3519px;
  margin-top: 677px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(24) {
  margin-left: 3643px;
  margin-top: 589px;
  -webkit-animation: flash 6s linear infinite;
          animation: flash 6s linear infinite;
}

.star:nth-of-type(25) {
  margin-left: 596px;
  margin-top: 478px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(26) {
  margin-left: 479px;
  margin-top: 213px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(27) {
  margin-left: 1517px;
  margin-top: 360px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(28) {
  margin-left: 232px;
  margin-top: 56px;
  -webkit-animation: flash 6s linear infinite;
          animation: flash 6s linear infinite;
}

.star:nth-of-type(29) {
  margin-left: 1461px;
  margin-top: 304px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(30) {
  margin-left: 945px;
  margin-top: 393px;
  -webkit-animation: flash 2s linear infinite;
          animation: flash 2s linear infinite;
}

.star:nth-of-type(31) {
  margin-left: 3826px;
  margin-top: 64px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(32) {
  margin-left: 2028px;
  margin-top: 564px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(33) {
  margin-left: 191px;
  margin-top: 128px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(34) {
  margin-left: 3997px;
  margin-top: 225px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(35) {
  margin-left: 2874px;
  margin-top: 635px;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
}

.star:nth-of-type(36) {
  margin-left: 318px;
  margin-top: 11px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(37) {
  margin-left: 1869px;
  margin-top: 562px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

.star:nth-of-type(38) {
  margin-left: 3943px;
  margin-top: 146px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(39) {
  margin-left: 10px;
  margin-top: 2px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-typ.........完整代码请登录后点击上方下载按钮下载查看