css实现时空穿梭动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现时空穿梭动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
  width: 100vw;
  background: #390946;
  background: radial-gradient(circle, #390946 0%, #38125b 8%, #14001d 36%, black 100%);
  overflow: hidden;
}

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*rotation can be added for additional affect
    animation: rotation 15s linear infinite;*/
}

.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  -webkit-perspective: 25px;
          perspective: 25px;
}

.hole {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px);
          transform: translateZ(-150px);
  background: transparent;
}

.space-bottom {
  position: absolute;
  width: 500px;
  height: 500px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: transparent;
  z-index: 2;
  -webkit-transform: rotateX(-80deg) translateZ(250px);
          transform: rotateX(-80deg) translateZ(250px);
}

.space-top {
  position: absolute;
  width: 500px;
  height: 500px;
  background: transparent;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  -webkit-transform: rotateX(80deg) translateZ(250px);
          transform: rotateX(80deg) translateZ(250px);
}

.space-left {
  position: absolute;
  width: 500px;
  height: 500px;
  border: solid 0px;
  border-radius: 50%;
  -webkit-transform: rotateY(-80deg) translateZ(250px);
          transform: rotateY(-80deg) translateZ(250px);
}

.space-right {
  position: absolute;
  width: 500px;
  height: 500px;
  border: solid 0px;
  border-radius: 50%;
  -webkit-transform: rotateY(80deg) translateZ(250px);
          transform: rotateY(80deg) translateZ(250px);
}

.star-top {
  position: absolute;
  left: 0px;
  width: 1px;
  height: 20px;
  opacity: 0;
  border-radius: 50%;
  background: #5729ff;
  box-shadow: 0 0 2px 1px purple;
  -webkit-animation: stars 1.25s linear infinite;
          animation: stars 1.25s linear infinite;
}
.star-top:nth-child(1) {
  top: calc(50% - -74px);
  left: calc(80% - 269px);
  -webkit-animation-delay: 1567ms;
          animation-delay: 1567ms;
}
.star-top:nth-child(2) {
  top: calc(50% - 159px);
  left: calc(80% - 71px);
  -webkit-animation-delay: 785ms;
          animation-delay: 785ms;
}
.star-top:nth-child(3) {
  top: calc(50% - 36px);
  left: calc(80% - 261px);
  -webkit-animation-delay: 1066ms;
          animation-delay: 1066ms;
}
.star-top:nth-child(4) {
  top: calc(50% - 26px);
  left: calc(80% - 228px);
  -webkit-animation-delay: 2066ms;
          animation-delay: 2066ms;
}
.star-top:nth-child(5) {
  top: calc(50% - -36px);
  left: calc(80% - 67px);
  -webkit-animation-delay: 4435ms;
          animation-delay: 4435ms;
}
.star-top:nth-child(6) {
  top: calc(50% - -154px);
  left: calc(80% - 7px);
  -webkit-animation-delay: 2636ms;
          animation-delay: 2636ms;
}
.star-top:nth-child(7) {
  top: calc(50% - 134px);
  left: calc(80% - 197px);
  -webkit-animation-delay: 334ms;
          animation-delay: 334ms;
}
.star-top:nth-child(8) {
  top: calc(50% - 38px);
  left: calc(80% - 33px);
  -webkit-animation-delay: 2764ms;
          animation-delay: 2764ms;
}
.star-top:nth-child(9) {
  top: calc(50% - -15px);
  left: calc(80% - 60px);
  -webkit-animation-delay: 4395ms;
          animation-delay: 4395ms;
}
.star-top:nth-child(10) {
  top: calc(50% - -62px);
  left: calc(80% - 135px);
  -webkit-animation-delay: 3587ms;
          animation-delay: 3587ms;
}
.star-top:nth-child(11) {
  top: calc(50% - -10px);
  left: calc(80% - 201px);
  -webkit-animation-delay: 2691ms;
          animation-delay: 2691ms;
}
.star-top:nth-child(12) {
  top: calc(50% - -156px);
  left: calc(80% - 144px);
  -webkit-animation-delay: 3475ms;
          animation-delay: 3475ms;
}
.star-top:nth-child(13) {
  top: calc(50% - 126px);
  left: calc(80% - 44px);
  -webkit-animation-delay: 4482ms;
          animation-delay: 4482ms;
}
.star-top:nth-child(14) {
  top: calc(50% - 98px);
  left: calc(80% - 117px);
  -webkit-animation-delay: 753ms;
          animation-delay: 753ms;
}
.star-top:nth-child(15) {
  top: calc(50% - -5px);
  left: calc(80% - 3px);
  -webkit-animation-delay: 3158ms;
          animation-delay: 3158ms;
}
.star-top:nth-child(16) {
  top: calc(50% - 184px);
  left: calc(80% - 182px);
  -webkit-animation-delay: 1222ms;
          animation-delay: 1222ms;
}
.star-top:nth-child(17) {
  top: calc(50% - 138px);
  left: calc(80% - 137px);
  -webkit-animation-delay: 1820ms;
          animation-delay: 1820ms;
}
.star-top:nth-child(18) {
  top: calc(50% - -7px);
  left: calc(80% - 66px);
  -webkit-animation-delay: 4875ms;
          animation-delay: 4875ms;
}
.star-top:nth-child(19) {
  top: calc(50% - 164px);
  left: calc(80% - 258px);
  -webkit-animation-delay: 2702ms;
          animation-delay: 2702ms;
}
.star-top:nth-child(20) {
  top: calc(50% - 132px);
  left: calc(80% - 180px);
  -webkit-animation-delay: 436ms;
          animation-delay: 436ms;
}
.star-top:nth-child(21) {
  top: calc(50% - -109px);
  left: calc(80% - 228px);
  -webkit-animation-delay: 920ms;
          animation-delay: 920ms;
}
.star-top:nth-child(22) {
  top: calc(50% - 13px);
  left: calc(80% - 283px);
  -webkit-animation-delay: 1331ms;
          animation-delay: 1331ms;
}
.star-top:nth-child(23) {
  top: calc(50% - -95px);
  left: calc(80% - 18px);
  -webkit-animation-delay: 3240ms;
          animation-delay: 3240ms;
}
.star-top:nth-child(24) {
  top: calc(50% - -4px);
  left: calc(80% - 27px);
  -webkit-animation-delay: 3664ms;
          animation-delay: 3664ms;
}
.star-top:nth-child(25) {
  top: calc(50% - 124px);
  left: calc(80% - 70px);
  -webkit-animation-delay: 4853ms;
          animation-delay: 4853ms;
}
.star-top:nth-child(26) {
  top: calc(50% - 190px);
  left: calc(80% - 246px);
  -webkit-animation-delay: 4660ms;
          animation-delay: 4660ms;
}
.star-top:nth-child(27) {
  top: calc(50% - -65px);
  left: calc(80% - 80px);
  -webkit-animation-delay: 4686ms;
          animation-delay: 4686ms;
}
.star-top:nth-child(28) {
  top: calc(50% - -110px);
  left: calc(80% - 189px);
  -webkit-animation-delay: 776ms;
          animation-delay: 776ms;
}
.star-top:nth-child(29) {
  top: calc(50% - 152px);
  left: calc(80% - 165px);
  -webkit-animation-delay: 405ms;
          animation-delay: 405ms;
}
.star-top:nth-child(30) {
  top: calc(50% - -137px);
  left: calc(80% - 159px);
  -webkit-animation-delay: 1841ms;
          animation-delay: 1841ms;
}

.star-bottom {
  position: absolute;
  left: 0px;
  width: 1px;
  height: 20px;
  opacity: 0;
  border-radius: 50%;
  background: #5729ff;
  box-shadow: 0 0 2px 1px purple;
  animation: stars 1.25s linear infinite reverse;
}
.star-bottom:nth-child(1) {
  top: calc(20% - -42px);
  left: calc(80% - 219px);
  -webkit-animation-delay: 3383ms;
          animation-delay: 3383ms;
}
.star-bottom:nth-child(2) {
  top: calc(20% - -182px);
  left: calc(80% - 261px);
  -webkit-animation-delay: 4439ms;
          animation-delay: 4439ms;
}
.star-bottom:nth-child(3) {
  top: calc(20% - 113px);
  left: calc(80% - 140px);
  -webkit-animation-delay: 3266ms;
          animation-delay: 3266ms;
}
.star-bottom:nth-child(4) {
  top: calc(20% - -25px);
  left: calc(80% - 2px);
  -webkit-animation-delay: 3766ms;
          animation-delay: 3766ms;
}
.star-bottom:nth-child(5) {
  top: calc(20% - 124px);
  left: calc(80% - 150px);
  -webkit-animation-delay: 517ms;
          animation-delay: 517ms;
}
.star-bottom:nth-child(6) {
  top: calc(20% - -189px);
  left: calc(80% - 204px);
  -webkit-animation-delay: 3156ms;
          animation-delay: 3156ms;
}
.star-bottom:nth-child(7) {
  top: calc(20% - -178px);
  left: calc(80% - 82px);
  -webkit-animation-delay: 9ms;
          animation-delay: 9ms;
}
.star-bottom:nth-child(8) {
  top: calc(20% - 80px);
  left: calc(80% - 145px);
  -webkit-animation-delay: 1513ms;
          animation-delay: 1513ms;
}
.star-bottom:nth-child(9) {
  top: calc(20% - -23px);
  left: calc(80% - 35px);
  -webkit-animation-delay: 4733ms;
          animation-delay: 4733ms;
}
.star-bottom:nth-child(10) {
  top: calc(20% - -172px);
  left: calc(80% - 107px);
  -webkit-animation-delay: 2072ms;
          animation-delay: 2072ms;
}
.star-bottom:nth-child(11) {
  top: calc(20% - 150px);
  left: calc(80% - 107px);
  -webkit-animation-delay: 2607ms;
          animation-delay: 2607ms;
}
.star-bottom:nth-child(12) {
  top: calc(20% - 13px);
  left: calc(80% - 187px);
  -webkit-animation-delay: 1278ms;
          animation-delay: 1278ms;
}
.star-bottom:nth-child(13) {
  top: calc(20% - 104px);
  left: calc(80% - 124px);
  -webkit-animation-delay: 3387ms;
          animation-delay: 3387ms;
}
.star-bottom:nth-child(14) {
  top: calc(20% - -11px);
  left: calc(80% - 265px);
  -webkit-animation-delay: 1345ms;
          animation-delay: 1345ms;
}
.star-bottom:nth-child(15) {
  top: calc(20% - 127px);
  left: calc(80% - 196px);
  -webkit-animation-delay: 3697ms;
          animation-delay: 3697ms;
}
.star-bottom:nth-child(16) {
  top: calc(20% - 31px);
  left: calc(80% - 92px);
  -webkit-animation-delay: 2666ms;
          animation-delay: 2666ms;
}
.star-bottom:nth-child(17) {
  top: calc(20% - 34px);
  left: calc(80% - 245px);
  -webkit-animation-delay: 3804ms;
          animation-delay: 3804ms;
}
.star-bottom:nth-child(18) {
  top: calc(20% - 173px);
  left: calc(80% - 166px);
  -webkit-animation-delay: 180ms;
          animation-delay: 180ms;
}
.star-bottom:nth-child(19) {
  top: calc(20% - 75px);
  left: calc(80% - 92px);
  -webkit-animation-delay: 3587ms;
          animation-delay: 3587ms;
}
.star-bottom:nth-child(20) {
  top: calc(20% - 51px);
  left: calc(80% - 256px);
  -webkit-animation-delay: 2969ms;
          animation-delay: 2969ms;
}
.star-bottom:nth-child(21) {
  top: calc(20% - -130px);
  left: calc(80% - 221px);
  -webkit-animation-delay: 3727ms;
          animation-delay: 3727ms;
}
.star-bottom:nth-child(22) {
  top: calc(20% - -130px);
  left: calc(80% - 134px);
  -webkit-animation-delay: 2206ms;
          animation-delay: 2206ms;
}
.star-bottom:nth-child(23) {
  top: calc(20% - 171px);
  left: calc(80% - 180px);
  -webkit-animation-delay: 3456ms;
          animation-delay: 3456ms;
}
.star-bottom:nth-child(24) {
  top: calc(20% - -83px);
  left: calc(80% - 170px);
  -webkit-animation-delay: 2266ms;
          animation-delay: 2266ms;
}
.star-bottom:nth-child(25) {
  top: calc(20% - -167px);
  left: calc(80% - 286px);
  -webkit-animation-delay: 2210ms;
          animation-delay: 2210ms;
}
.star-bottom:nth-child(26) {
  top: calc(20% - -112px);
  left: calc(80% - 276px);
  -webkit-animation-delay: 2689ms;
          animation-delay: 2689ms;
}
.star-bottom:nth-child(27) {
  top: calc(20% - -48px);
  left: calc(80% - 164px);
  -webkit-animation-delay: 1130ms;
          animation-delay: 1130ms;
}
.star-bottom:nth-child(28) {
  top: calc(20% - -142px);
  left: calc(80% - 262px);
  -webkit-animation-delay: 1522ms;
          animation-delay: 1522ms;
}
.star-bottom:nth-child(29) {
  top: calc(20% - -36px);
  left: calc(80% - 75px);
  -webkit-animation-delay: 2481ms;
          animation-delay: 2481ms;
}
.star-bottom:nth-child(30) {
  top: calc(20% - 132px);
  left: calc(80% - 205px);
  -webkit-animation-delay: 2399ms;
          animation-delay: 2399ms;
}

.star-left {
  position: absolute;
  width: 20px;
  height: 1px;
  opacity: 0;
  border-radius: 50%;
  background: #5729ff;
  box-shadow: 0 0 2px 1px purple;
  animation: stars2 1.25s linear infinite reverse;
}
.star-left:nth-child(1) {
  top: calc(50% - 135px);
  left: calc(100% - 37px);
  -webkit-animation-delay: 459ms;
          animation-delay: 459ms;
}
.star-left:nth-child(2) {
  top: calc(50% - -110px);
  left: calc(100% - 168px);
  -webkit-animation-delay: 1279ms;
          animation-delay: 1279ms;
}
.star-left:nth-child(3) {
  top: calc(50% - -85px);
  left: calc(100% - 18px);
  -webkit-animation-delay: 2683ms;
          animation-delay: 2683ms;
}
.star-left:nth-child(4) {
  top: calc(50% - 130px);
  left: calc(100% - 124px);
  -webkit-animation-delay: 3094ms;
          animation-delay: 3094ms;
}
.star-left:nth-child(5) {
  top: calc(50% - 174px);
  left: calc(100% - 174px);
  -webkit-animation-delay: 1944ms;
          animation-delay: 1944ms;
}
.star-left:nth-child(6) {
  top: calc(50% - 8px);
  left: calc(100% - 129px);
  -webkit-animation-delay: 340ms;
          animation-delay: 340ms;
}
.star-left:nth-child(7) {
  top: calc(50% - 37px);
  left: calc(100% - 160px);
  -webkit-animation-delay: 584ms;
          animation-delay: 584ms;
}
.star-left:nth-child(8) {
  top: calc(50% - 135px);
  left: calc(100% - 116px);
  -webkit-animation-delay: 2840ms;
          animation-delay: 2840ms;
}
.star-left:nth-child(9) {
  top: calc(50% - 186px);
  left: calc(100% - 8px);
  -webkit-animation-delay: 1848ms;
          animation-delay: 1848ms;
}
.star-left:nth-child(10) {
  top: calc(50% - -11px);
  left: calc(100% - 88px);
  -webkit-animation-delay: 3477ms;
          animation-delay: 3477ms;
}
.star-left:nth-child(11) {
  top: calc(50% - 114px);
  left: calc(100% - 190px);
  -webkit-animation-delay: 4322ms;
          animation-delay: 4322ms;
}
.star-left:nth-child(12) {
  top: calc(50% - -154px);
  left: calc(100% - 49px);
  -webkit-animation-delay: 3585ms;
          animation-delay: 3585ms;
}
.star-left:nth-child(13) {
  top: calc(50% - 163px);
  left: calc(100% - 9px);
  -webkit-animation-delay: 3809ms;
          animation-delay: 3809ms;
}
.star-left:nth-child(14) {
  top: calc(50% - 73px);
  left: calc(100% - 118px);
  -webkit-animation-delay: 2320ms;
          animation-delay: 2320ms;
}
.star-left:nth-child(15) {
  top: calc(50% - 42px);
  left: calc(100% - 7px);
  -webkit-animation-delay: 4810ms;
          animation-delay: 4810ms;
}
.star-left:nth-child(16) {
  top: calc(50% - 185px);
  left: calc(100% - 103px);
  -webkit-animation-delay: 905ms;
          animation-delay: 905ms;
}
.star-left:nth-child(17) {
  top: calc(50% - -128px);
  left: calc(100% - 100px);
  -webkit-animation-delay: 1710ms;
          animation-delay: 1710ms;
}
.star-left:nth-child(18) {
  top: calc(50% - 60px);
  left: calc(100% - 173px);
  -webkit-animation-delay: 2301ms;
          animation-delay: 2301ms;
}
.star-left:nth-child(19) {
  top: calc(50% - 115px);
  left: calc(100% - 56px);
  -webkit-animation-delay: 3430ms;
          animation-delay: 3430ms;
}
.star-left:nth-child(20) {
  top: calc(50% - 134px);
  left: calc(100% - 145px);
  -webkit-animation-delay: 943ms;
          animation-delay: 943ms;
}
.star-left:nth-child(21) {
  top: calc(50% - 53px);
  left: calc(100% - 94px);
  -webkit-animation-delay: 4412ms;
          animation-delay: 4412ms;
}
.star-left:nth-child(22) {
  top: calc(50% - 60px);
  left: calc(100% - 51px);
  -webkit-animation-delay: 505ms;
          animation-delay: 505ms;
}
.star-left:nth-child(23) {
  top: calc(50% - 143px);
  left: calc(100% - 105px);
  -webkit-animation-delay: 4259ms;
          animation-delay: 4259ms;
}
.star-left:nth-child(24) {
  top: calc(50% - -52px);
  left: calc(100% - 50px);
  -webkit-animation-delay: 4043ms;
          animation-delay: 4043ms;
}
.star-left:nth-child(25) {
  top: calc(50% - 133px);
  left: calc(100% - 58px);
  -webkit-animation-delay: 2332ms;
          animation-delay: 2332ms;
}
.star-left:nth-child(26) {
  top: calc(50% - 92px);
  left: calc(100% - 113px);
  -webkit-animation-delay: 1866ms;
          animation-delay: 1866ms;
}
.star-left:nth-child(27) {
  top: calc(50% - 132px);
  left: calc(100% - 113px);
  -webkit-animation-delay: 3158ms;
          animation-delay: 3158ms;
}
.star-left:nth-child(28) {
  top: calc(50% - -64px);
  left: calc(100% - 129px);
  -webkit-animation-delay: 1106ms;
          animation-delay: 1106ms;
}
.star-left:nth-child(29) {
  top: calc(50% - 34px);
  left: calc(100% - 77px);
  -webkit-animation-delay: 2650ms;
          animation-delay: 2650ms;
}
.star-left:nth-child(30) {
  top: calc(50% - -116px);
  left: calc(100% - 189px);
  -webkit-animation-delay: 4184ms;
          animation-delay: 4184ms;
}

.star-right {
  position: absolute;
  top: 0px;
  width: 20px;
  height: 1px;
  opacity: 0;
  border-radius: 50%;
  background: #5729ff;
  box-shadow: 0 0 2px 1px purple;
  -webkit-animation: stars2 1.25s linear infinite;
          animation: stars2 1.25s linear infinite;
}
.star-right:nth-child(1) {
  top: calc(50% - -72px);
  left: calc(90% - 3px);
  -webkit-animation-delay: 3020ms;
          animation-delay: 3020ms;
}
.star-right:nth-child(2) {
  top: calc(50% - -9px);
  left: calc(90% - 142px);
  -webkit-animation-delay: 4491ms;
          animation-delay: 4491ms;
}
.star-right:nth-child(3) {
  top: calc(50% - -66px);
  left: calc(90% - 129px);
  -webkit-animation-delay: 2087ms;
          animation-delay: 2087ms;
}
.star-right:nth-child(4) {
  top: calc(50% - -1px);
  left: calc(90% - 143px);
  -webkit-animation-delay: 2157ms;
          animation-delay: 2157ms;
}
.star-right:nth-child(5) {
  top: calc(50% - -78px);
  left: calc(90% - 3px);
  -webkit-animation-delay: 2379ms;
          animation-delay: 2379ms;
}
.star-right:nth-child(6) {
  top: calc(50% - 148px);
  left: calc(90% - 33px);
  -webkit-animation-delay: 265ms;
          animation-delay: 265ms;
}
.star-right:nth-child(7) {
  top: calc(50% - 91px);
  left: calc(90% - 226px);
  -webkit-animation-delay: 3438ms;
          animation-delay: 3438ms;
}
.star-right:nth-child(8) {
  top: calc(50% - 70px);
  left: calc(90% - 117px);
  -webkit-animation-delay: 683ms;
          animation-delay: 683ms;
}
.star-right:nth-child(9) {
  top: calc(50% - 76px);
  left: calc(90% - 287px);
  -webkit-animation-delay: 515ms;
          animation-delay: 515ms;
}
.star-right:nth-child(10) {
  top: calc(50% - 7px);
  left: calc(90% - 127px);
  -webkit-animation-delay: 855ms;
          animation-delay: 855ms;
}
.star-right:nth-child(11) {
  top: calc(50% - 31px);
  left: calc(90% - 286px);
  -webkit-animation-delay: 1605ms;
          animation-delay: 1605ms;
}
.star-right:nth-child(12) {
  top: calc(50% - -171px);
  left: calc(90% - 89px);
  -webkit-animation-delay: 4258ms;
          animation-delay: 4258ms;
}
.star-right:nth-child(13) {
  top: calc(50% - 45px);
  left: calc(90% - 242px);
  -webkit-animation-delay: 1350ms;
          animation-delay: 1350ms;
}
.star-right:nth-child(14) {
  top: calc(50% - 6px);
  left: calc(90% - 242px);
  -webkit-animation-delay: 564ms;
          animation-delay: 564ms;
}
.star-right:nth-child(15) {
  top: calc(50% - -56px);
  left: calc(90% - 67px);
  -webkit-animation-delay: 4643ms;
          animation-delay: 4643ms;
}
.star-right:nth-child(16) {
  top: calc(50% - -44px);
  left: calc(90% - 119px);
  -webkit-animation-delay: 2732ms;
          animation-delay: 2732ms;
}
.star-right:nth-child(17) {
  top: calc(50% - -199px);
  left: calc(90% - 133px);
  -webkit-animation-delay: 4376ms;
          animation-delay: 4376ms;
}
.star-right:nth-child(18) {
  top: calc(50% - -58px);
  left: calc(90% - 92px);
  -webkit-animation-delay: 36ms;
          animation-delay: 36ms;
}
.star-right:nth-child(19) {
  top: calc(50% - 154px);
  left: calc(90% - 49px);
  -webkit-animation-delay: 2450ms;
          animation-delay: 2450ms;
}
.star-right:nth-child(20) {
  top: calc(50% - 78px);
  left: calc(90% - 67px);
  -webkit-animation-delay: 2772ms;
          animation-delay: 2772ms;
}
.star-right:nth-child(21) {
  top: calc(50% - -17px);
  left: calc(90% - 130px);
  -webkit-animation-delay: 2516ms;
          animation-delay: 2516ms;
}
.star-right:nth-child(22) {
  top: calc(50% - -21px);
  left: calc(90% - 269px);
  -webkit-animation-delay: 4528ms;
          animation-delay: 4528ms;
}
.star-right:nth-child(23) {
  top: calc(50% - -128px);
  left: calc(90% - 31px);
  -webkit-animation-delay: 3946ms;
          animation-delay: 3946ms;
}
.star-right:nth-child(24) {
  top: calc(50% - 12px);
  left: calc(90% - 120px);
  -webkit-animation-delay: 779ms;
          animation-delay: 779ms;
}
.star-right:nth-child(25) {
  top: calc(50% - 160px);
  left: calc(90% - 221px);
  -webkit-animation-delay: 10ms;
          animation-delay: 10ms;
}
.star-right:nth-child(26) {
  top: calc(50% - 32px);
  left: calc(90% - 107px);
  -webkit-animation-delay: 4867ms;
          animation-delay: 4867ms;
}
.star-right:nth-child(27) {
  top: calc(50% - -193px);
  left: calc(90% - 18px);
  -webkit-animation-delay: 2068ms;
          animation-delay: 2068ms;
}
.star-right:nth-child(28) {
  top: calc(50% - 20px);
  left: calc(90% - 63px);
  -webkit-animation-delay: 76ms;
          animation-delay: 76ms;
}
.star-right:nth-child(29) {
  top: calc(50% - 52px);
  left: calc(90% - 113px);
  -webkit-animation-delay: 3282ms;
          animation-delay: 3282ms;
}
.star-right:nth-child(30) {
  top: calc(50% - -4px);
  left: calc(90% - 284px);
  -webkit-animation-delay: 2717ms;
          animation-delay: 2717ms;
}

/*second container for 50px perspective*/
.container2 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.wrapper2 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  -webkit-perspective: 50px;
          perspective: 50px;
}

.hole2 {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px);
          transform: translateZ(-150px);
  background: transparent;
}

/*third container for 100px perspective*/
.container3 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}

.wrapper3 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  -webkit-perspective: 100px;
          perspective: 100px;
}

.hole3 {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px);
          transform: translateZ(-150px);
  background: transparent;
}

/*fourth container for 125px perspective*/
.container4 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
          transform: translate(-50%, -50%) rotate(225deg);
}

.wrapper4 {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  -webkit-perspective: 125px;
          perspective: 125px;
}

.hole4 {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px);
          transform: translateZ(-150px);
  background: transparent;
}

@-webkit-keyframes stars {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0px) translatey(0xp) translatez(0px);
            transform: translatex(0px) translatey(0xp) translatez(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(25px) translatey(250px) translatez(-1000px);
            transform: translatex(25px) translatey(250px) translatez(-1000px);
  }
}

@keyframes stars {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0px) translatey(0xp) translatez(0px);
            transform: translatex(0px) translatey(0xp) translatez(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(25px) translatey(250px) translatez(-1000px);
            transform: translatex(25px) translatey(250px) translatez(-1000px);
  }
}
@-webkit-keyframes stars2 {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0px) translatey(0xp) translatez(0px);
            transform: translatex(0px) translatey(0xp) translatez(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(-250px) translatey(25px) translatez(-1000px);
            transform: translatex(-250px) translatey(25px) translatez(-1000px);
  }
}
@keyframes stars2 {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0px) translatey(0xp) translatez(0px);
            transform: translatex(0px) translatey(0xp) translatez(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(-250px) translatey(25px) translatez(-1000px);
            transform: translatex(-250px) translatey(25px) translatez(-1000px);
  }
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
</style>

</head>
<body>

<div class="container">
  <div class="wrapper">
    <div class="hole">
      <div class="space-bottom">
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
        <div class="star-bottom"></div>
      </div>
      <div class="space-t.........完整代码请登录后点击上方下载按钮下载查看