纯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-type(40) {
  margin-left: 1098px;
  margin-top: 409px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

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

.star:nth-of-type(42) {
  margin-left: 4000px;
  margin-top: 523px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

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

.star:nth-of-type(44) {
  margin-left: 2091px;
  margin-top: 359px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(45) {
  margin-left: 2084px;
  margin-top: 659px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

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

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

.star:nth-of-type(48) {
  margin-left: 1514px;
  margin-top: 299px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

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

.star:nth-of-type(50) {
  margin-left: 3232px;
  margin-top: 691px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(51) {
  margin-left: 541px;
  margin-top: 662px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(52) {
  margin-left: 627px;
  margin-top: 457px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(53) {
  margin-left: 3061px;
  margin-top: 852px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(54) {
  margin-left: 1467px;
  margin-top: 705px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

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

.star:nth-of-type(56) {
  margin-left: 413px;
  margin-top: 285px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(57) {
  margin-left: 1421px;
  margin-top: 587px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

.star:nth-of-type(58) {
  margin-left: 3452px;
  margin-top: 814px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(59) {
  margin-left: 1971px;
  margin-top: 723px;
  -webkit-animation: flash 2s linear infinite;
          animation: flash 2s linear infinite;
}

.star:nth-of-type(60) {
  margin-left: 1441px;
  margin-top: 545px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(61) {
  margin-left: 2632px;
  margin-top: 25px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(62) {
  margin-left: 3105px;
  margin-top: 399px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(63) {
  margin-left: 951px;
  margin-top: 87px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(64) {
  margin-left: 1966px;
  margin-top: 259px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(65) {
  margin-left: 771px;
  margin-top: 58px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(66) {
  margin-left: 1171px;
  margin-top: 708px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(67) {
  margin-left: 573px;
  margin-top: 327px;
  -webkit-animation: flash 2s linear infinite;
          animation: flash 2s linear infinite;
}

.star:nth-of-type(68) {
  margin-left: 252px;
  margin-top: 117px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(69) {
  margin-left: 2783px;
  margin-top: 334px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(70) {
  margin-left: 1919px;
  margin-top: 824px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(71) {
  margin-left: 3712px;
  margin-top: 281px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(72) {
  margin-left: 3564px;
  margin-top: 83px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

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

.star:nth-of-type(74) {
  margin-left: 1724px;
  margin-top: 833px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(75) {
  margin-left: 1149px;
  margin-top: 240px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(76) {
  margin-left: 3999px;
  margin-top: 203px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

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

.star:nth-of-type(78) {
  margin-left: 1931px;
  margin-top: 232px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(79) {
  margin-left: 3969px;
  margin-top: 483px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(80) {
  margin-left: 575px;
  margin-top: 702px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(81) {
  margin-left: 3734px;
  margin-top: 74px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(82) {
  margin-left: 446px;
  margin-top: 431px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(83) {
  margin-left: 1875px;
  margin-top: 257px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

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

.star:nth-of-type(85) {
  margin-left: 1718px;
  margin-top: 287px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(86) {
  margin-left: 1655px;
  margin-top: 837px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(87) {
  margin-left: 1217px;
  margin-top: 621px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

.star:nth-of-type(88) {
  margin-left: 2299px;
  margin-top: 292px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

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

.star:nth-of-type(90) {
  margin-left: 3904px;
  margin-top: 885px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

.star:nth-of-type(91) {
  margin-left: 2324px;
  margin-top: 699px;
  -webkit-animation: flash 10s linear infinite;
          animation: flash 10s linear infinite;
}

.star:nth-of-type(92) {
  margin-left: 2409px;
  margin-top: 750px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

.star:nth-of-type(93) {
  margin-left: 3700px;
  margin-top: 305px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(94) {
  margin-left: 582px;
  margin-top: 373px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(95) {
  margin-left: 3453px;
  margin-top: 173px;
  -webkit-animation: flash 7s linear infinite;
          animation: flash 7s linear infinite;
}

.star:nth-of-type(96) {
  margin-left: 2031px;
  margin-top: 438px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(97) {
  margin-left: 1768px;
  margin-top: 450px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(98) {
  margin-left: 325px;
  margin-top: 743px;
  -webkit-animation: flash 3s linear infinite;
          animation: flash 3s linear infinite;
}

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

.star:nth-of-type(100) {
  margin-left: 3810px;
  margin-top: 421px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(101) {
  margin-left: 3465px;
  margin-top: 482px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(102) {
  margin-left: 3368px;
  margin-top: 201px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

.star:nth-of-type(103) {
  margin-left: 3607px;
  margin-top: 596px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(104) {
  margin-left: 535px;
  margin-top: 509px;
  -webkit-animation: flash 5s linear infinite;
          animation: flash 5s linear infinite;
}

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

.star:nth-of-type(106) {
  margin-left: 3769px;
  margin-top: 209px;
  -webkit-animation: flash 9s linear infinite;
          animation: flash 9s linear infinite;
}

.star:nth-of-type(107) {
  margin-left: 1743px;
  margin-top: 253px;
  -webkit-animation: flash 8s linear infinite;
          animation: flash 8s linear infinite;
}

.star:nth-of-type(108) {
  margin-left: 1294px;
  margin-top: 110px;
  -webkit-animation: flash 4s linear infinite;
          animation: flash 4s linear infinite;
}

.star:nth-of-type(109) {
  margin-left: 2323px;
  margin-top: 831px;
  -webkit-animation: flash 2s linear infinite;
          animation: flash 2s linear infinite;
}

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

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