100个hr+css组成三维长方形旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：100个hr+css组成三维长方形旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100vw;
  height: 100vh;
  background: black;
  -webkit-perspective: 300px;
          perspective: 300px;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 60s linear infinite;
          animation: rotate 60s linear infinite;
}
.wrapper hr:nth-child(1) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr1 30s ease-in-out -99s infinite alternate;
          animation: hr1 30s ease-in-out -99s infinite alternate;
}
@-webkit-keyframes hr1 {
  0% {
    border: solid 2px #33ff70;
    box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset;
    -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
            transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ae3ff3;
    box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset;
    -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
            transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
    width: 28px;
  }
}
@keyframes hr1 {
  0% {
    border: solid 2px #33ff70;
    box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset;
    -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
            transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ae3ff3;
    box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset;
    -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
            transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
    width: 28px;
  }
}
.wrapper hr:nth-child(2) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr2 30s ease-in-out -98s infinite alternate;
          animation: hr2 30s ease-in-out -98s infinite alternate;
}
@-webkit-keyframes hr2 {
  0% {
    border: solid 2px #6633ff;
    box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
    -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
            transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #da33ff;
    box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset;
    -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
            transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
    width: 24px;
  }
}
@keyframes hr2 {
  0% {
    border: solid 2px #6633ff;
    box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
    -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
            transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #da33ff;
    box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset;
    -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
            transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
    width: 24px;
  }
}
.wrapper hr:nth-child(3) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr3 30s ease-in-out -97s infinite alternate;
          animation: hr3 30s ease-in-out -97s infinite alternate;
}
@-webkit-keyframes hr3 {
  0% {
    border: solid 2px #33daff;
    box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset;
    -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
            transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3d33ff;
    box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset;
    -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
            transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
    width: 20px;
  }
}
@keyframes hr3 {
  0% {
    border: solid 2px #33daff;
    box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset;
    -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
            transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3d33ff;
    box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset;
    -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
            transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
    width: 20px;
  }
}
.wrapper hr:nth-child(4) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr4 30s ease-in-out -96s infinite alternate;
          animation: hr4 30s ease-in-out -96s infinite alternate;
}
@-webkit-keyframes hr4 {
  0% {
    border: solid 2px #5ff141;
    box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset;
    -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
            transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ab57db;
    box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset;
    -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
            transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
    width: 11px;
  }
}
@keyframes hr4 {
  0% {
    border: solid 2px #5ff141;
    box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset;
    -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
            transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ab57db;
    box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset;
    -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
            transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
    width: 11px;
  }
}
.wrapper hr:nth-child(5) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr5 30s ease-in-out -95s infinite alternate;
          animation: hr5 30s ease-in-out -95s infinite alternate;
}
@-webkit-keyframes hr5 {
  0% {
    border: solid 2px #e74b87;
    box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset;
    -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
            transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33e0ff;
    box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset;
    -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
            transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
    width: 49px;
  }
}
@keyframes hr5 {
  0% {
    border: solid 2px #e74b87;
    box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset;
    -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
            transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33e0ff;
    box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset;
    -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
            transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
    width: 49px;
  }
}
.wrapper hr:nth-child(6) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr6 30s ease-in-out -94s infinite alternate;
          animation: hr6 30s ease-in-out -94s infinite alternate;
}
@-webkit-keyframes hr6 {
  0% {
    border: solid 2px #bb33ff;
    box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset;
    -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
            transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33fff5;
    box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset;
    -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
            transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
    width: 16px;
  }
}
@keyframes hr6 {
  0% {
    border: solid 2px #bb33ff;
    box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset;
    -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
            transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33fff5;
    box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset;
    -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
            transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
    width: 16px;
  }
}
.wrapper hr:nth-child(7) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr7 30s ease-in-out -93s infinite alternate;
          animation: hr7 30s ease-in-out -93s infinite alternate;
}
@-webkit-keyframes hr7 {
  0% {
    border: solid 2px #8241f1;
    box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset;
    -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
            transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff63;
    box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
    -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
            transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
    width: 31px;
  }
}
@keyframes hr7 {
  0% {
    border: solid 2px #8241f1;
    box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset;
    -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
            transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff63;
    box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
    -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
            transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
    width: 31px;
  }
}
.wrapper hr:nth-child(8) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr8 30s ease-in-out -92s infinite alternate;
          animation: hr8 30s ease-in-out -92s infinite alternate;
}
@-webkit-keyframes hr8 {
  0% {
    border: solid 2px #33f1ff;
    box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
    -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
            transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #52e065;
    box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset;
    -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
            transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
    width: 70px;
  }
}
@keyframes hr8 {
  0% {
    border: solid 2px #33f1ff;
    box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
    -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
            transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #52e065;
    box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset;
    -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
            transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
    width: 70px;
  }
}
.wrapper hr:nth-child(9) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr9 30s ease-in-out -91s infinite alternate;
          animation: hr9 30s ease-in-out -91s infinite alternate;
}
@-webkit-keyframes hr9 {
  0% {
    border: solid 2px #33ffb4;
    box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset;
    -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
            transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #56dc63;
    box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset;
    -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
            transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
    width: 49px;
  }
}
@keyframes hr9 {
  0% {
    border: solid 2px #33ffb4;
    box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset;
    -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
            transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #56dc63;
    box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset;
    -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
            transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
    width: 49px;
  }
}
.wrapper hr:nth-child(10) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr10 30s ease-in-out -90s infinite alternate;
          animation: hr10 30s ease-in-out -90s infinite alternate;
}
@-webkit-keyframes hr10 {
  0% {
    border: solid 2px #ff33b1;
    box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset;
    -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
            transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #be33ff;
    box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset;
    -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
            transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
    width: 64px;
  }
}
@keyframes hr10 {
  0% {
    border: solid 2px #ff33b1;
    box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset;
    -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
            transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #be33ff;
    box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset;
    -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
            transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
    width: 64px;
  }
}
.wrapper hr:nth-child(11) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr11 30s ease-in-out -89s infinite alternate;
          animation: hr11 30s ease-in-out -89s infinite alternate;
}
@-webkit-keyframes hr11 {
  0% {
    border: solid 2px #b433ff;
    box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset;
    -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
            transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #4fe36c;
    box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset;
    -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
            transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
    width: 19px;
  }
}
@keyframes hr11 {
  0% {
    border: solid 2px #b433ff;
    box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset;
    -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
            transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #4fe36c;
    box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset;
    -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
            transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
    width: 19px;
  }
}
.wrapper hr:nth-child(12) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr12 30s ease-in-out -88s infinite alternate;
          animation: hr12 30s ease-in-out -88s infinite alternate;
}
@-webkit-keyframes hr12 {
  0% {
    border: solid 2px #3dff33;
    box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset;
    -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
            transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #f833ff;
    box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset;
    -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
            transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
    width: 51px;
  }
}
@keyframes hr12 {
  0% {
    border: solid 2px #3dff33;
    box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset;
    -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
            transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #f833ff;
    box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset;
    -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
            transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
    width: 51px;
  }
}
.wrapper hr:nth-child(13) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr13 30s ease-in-out -87s infinite alternate;
          animation: hr13 30s ease-in-out -87s infinite alternate;
}
@-webkit-keyframes hr13 {
  0% {
    border: solid 2px #33ffbb;
    box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset;
    -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
            transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #7237fb;
    box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset;
    -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
            transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
    width: 71px;
  }
}
@keyframes hr13 {
  0% {
    border: solid 2px #33ffbb;
    box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset;
    -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
            transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #7237fb;
    box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset;
    -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
            transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
    width: 71px;
  }
}
.wrapper hr:nth-child(14) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr14 30s ease-in-out -86s infinite alternate;
          animation: hr14 30s ease-in-out -86s infinite alternate;
}
@-webkit-keyframes hr14 {
  0% {
    border: solid 2px #33ffd6;
    box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset;
    -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
            transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33be;
    box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset;
    -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
            transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
    width: 34px;
  }
}
@keyframes hr14 {
  0% {
    border: solid 2px #33ffd6;
    box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset;
    -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
            transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33be;
    box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset;
    -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
            transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
    width: 34px;
  }
}
.wrapper hr:nth-child(15) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr15 30s ease-in-out -85s infinite alternate;
          animation: hr15 30s ease-in-out -85s infinite alternate;
}
@-webkit-keyframes hr15 {
  0% {
    border: solid 2px #6933ff;
    box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset;
    -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
            transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #37fb8f;
    box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset;
    -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
            transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
    width: 65px;
  }
}
@keyframes hr15 {
  0% {
    border: solid 2px #6933ff;
    box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset;
    -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
            transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #37fb8f;
    box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset;
    -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
            transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
    width: 65px;
  }
}
.wrapper hr:nth-child(16) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr16 30s ease-in-out -84s infinite alternate;
          animation: hr16 30s ease-in-out -84s infinite alternate;
}
@-webkit-keyframes hr16 {
  0% {
    border: solid 2px #338bff;
    box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset;
    -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
            transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #8f33ff;
    box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset;
    -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
            transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
    width: 75px;
  }
}
@keyframes hr16 {
  0% {
    border: solid 2px #338bff;
    box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset;
    -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
            transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #8f33ff;
    box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset;
    -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
            transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
    width: 75px;
  }
}
.wrapper hr:nth-child(17) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr17 30s ease-in-out -83s infinite alternate;
          animation: hr17 30s ease-in-out -83s infinite alternate;
}
@-webkit-keyframes hr17 {
  0% {
    border: solid 2px #337eff;
    box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset;
    -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
            transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33fffc;
    box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset;
    -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
            transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
    width: 55px;
  }
}
@keyframes hr17 {
  0% {
    border: solid 2px #337eff;
    box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset;
    -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
            transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33fffc;
    box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset;
    -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
            transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
    width: 55px;
  }
}
.wrapper hr:nth-child(18) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr18 30s ease-in-out -82s infinite alternate;
          animation: hr18 30s ease-in-out -82s infinite alternate;
}
@-webkit-keyframes hr18 {
  0% {
    border: solid 2px #5cff33;
    box-shadow: 0 0 5px #33ff70, 0 0 5px #33ff70 inset;
    -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg);
            transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3333ff;
    box-shadow: 0 0 5px #35a0fd, 0 0 5px #35a0fd inset;
    -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg);
            transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg);
    width: 70px;
  }
}
@keyframes hr18 {
  0% {
    border: solid 2px #5cff33;
    box-shadow: 0 0 5px #33ff70, 0 0 5px #33ff70 inset;
    -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg);
            transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3333ff;
    box-shadow: 0 0 5px #35a0fd, 0 0 5px #35a0fd inset;
    -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg);
            transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg);
    width: 70px;
  }
}
.wrapper hr:nth-child(19) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr19 30s ease-in-out -81s infinite alternate;
          animation: hr19 30s ease-in-out -81s infinite alternate;
}
@-webkit-keyframes hr19 {
  0% {
    border: solid 2px #33a7ff;
    box-shadow: 0 0 5px #46a4ec, 0 0 5px #46a4ec inset;
    -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg);
            transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ee4471;
    box-shadow: 0 0 5px #ff3352, 0 0 5px #ff3352 inset;
    -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg);
            transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg);
    width: 63px;
  }
}
@keyframes hr19 {
  0% {
    border: solid 2px #33a7ff;
    box-shadow: 0 0 5px #46a4ec, 0 0 5px #46a4ec inset;
    -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg);
            transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ee4471;
    box-shadow: 0 0 5px #ff3352, 0 0 5px #ff3352 inset;
    -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg);
            transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg);
    width: 63px;
  }
}
.wrapper hr:nth-child(20) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr20 30s ease-in-out -80s infinite alternate;
          animation: hr20 30s ease-in-out -80s infinite alternate;
}
@-webkit-keyframes hr20 {
  0% {
    border: solid 2px #33ff9c;
    box-shadow: 0 0 5px #406df2, 0 0 5px #406df2 inset;
    -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg);
            transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffd3;
    box-shadow: 0 0 5px #33ff92, 0 0 5px #33ff92 inset;
    -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg);
            transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg);
    width: 32px;
  }
}
@keyframes hr20 {
  0% {
    border: solid 2px #33ff9c;
    box-shadow: 0 0 5px #406df2, 0 0 5px #406df2 inset;
    -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg);
            transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffd3;
    box-shadow: 0 0 5px #33ff92, 0 0 5px #33ff92 inset;
    -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg);
            transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg);
    width: 32px;
  }
}
.wrapper hr:nth-child(21) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr21 30s ease-in-out -79s infinite alternate;
          animation: hr21 30s ease-in-out -79s infinite alternate;
}
@-webkit-keyframes hr21 {
  0% {
    border: solid 2px #ad33ff;
    box-shadow: 0 0 5px #4de696, 0 0 5px #4de696 inset;
    -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg);
            transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff74;
    box-shadow: 0 0 5px #ff3399, 0 0 5px #ff3399 inset;
    -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg);
            transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg);
    width: 7px;
  }
}
@keyframes hr21 {
  0% {
    border: solid 2px #ad33ff;
    box-shadow: 0 0 5px #4de696, 0 0 5px #4de696 inset;
    -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg);
            transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff74;
    box-shadow: 0 0 5px #ff3399, 0 0 5px #ff3399 inset;
    -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg);
            transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg);
    width: 7px;
  }
}
.wrapper hr:nth-child(22) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr22 30s ease-in-out -78s infinite alternate;
          animation: hr22 30s ease-in-out -78s infinite alternate;
}
@-webkit-keyframes hr22 {
  0% {
    border: solid 2px #6af83a;
    box-shadow: 0 0 5px #33bbff, 0 0 5px #33bbff inset;
    -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg);
            transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffe0;
    box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
    -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg);
            transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg);
    width: 18px;
  }
}
@keyframes hr22 {
  0% {
    border: solid 2px #6af83a;
    box-shadow: 0 0 5px #33bbff, 0 0 5px #33bbff inset;
    -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg);
            transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffe0;
    box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
    -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg);
            transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg);
    width: 18px;
  }
}
.wrapper hr:nth-child(23) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr23 30s ease-in-out -77s infinite alternate;
          animation: hr23 30s ease-in-out -77s infinite alternate;
}
@-webkit-keyframes hr23 {
  0% {
    border: solid 2px #338fff;
    box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset;
    -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg);
            transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33cf;
    box-shadow: 0 0 5px #5a58da, 0 0 5px #5a58da inset;
    -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg);
            transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg);
    width: 61px;
  }
}
@keyframes hr23 {
  0% {
    border: solid 2px #338fff;
    box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset;
    -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg);
            transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33cf;
    box-shadow: 0 0 5px #5a58da, 0 0 5px #5a58da inset;
    -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg);
            transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg);
    width: 61px;
  }
}
.wrapper hr:nth-child(24) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr24 30s ease-in-out -76s infinite alternate;
          animation: hr24 30s ease-in-out -76s infinite alternate;
}
@-webkit-keyframes hr24 {
  0% {
    border: solid 2px #33ff88;
    box-shadow: 0 0 5px #3633ff, 0 0 5px #3633ff inset;
    -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg);
            transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #bb4be7;
    box-shadow: 0 0 5px #5233ff, 0 0 5px #5233ff inset;
    -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg);
            transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg);
    width: 73px;
  }
}
@keyframes hr24 {
  0% {
    border: solid 2px #33ff88;
    box-shadow: 0 0 5px #3633ff, 0 0 5px #3633ff inset;
    -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg);
            transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #bb4be7;
    box-shadow: 0 0 5px #5233ff, 0 0 5px #5233ff inset;
    -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg);
            transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg);
    width: 73px;
  }
}
.wrapper hr:nth-child(25) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr25 30s ease-in-out -75s infinite alternate;
          animation: hr25 30s ease-in-out -75s infinite alternate;
}
@-webkit-keyframes hr25 {
  0% {
    border: solid 2px #e1516b;
    box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
    -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg);
            transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #35fd64;
    box-shadow: 0 0 5px #66ff33, 0 0 5px #66ff33 inset;
    -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg);
            transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg);
    width: 20px;
  }
}
@keyframes hr25 {
  0% {
    border: solid 2px #e1516b;
    box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
    -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg);
            transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #35fd64;
    box-shadow: 0 0 5px #66ff33, 0 0 5px #66ff33 inset;
    -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg);
            transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg);
    width: 20px;
  }
}
.wrapper hr:nth-child(26) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr26 30s ease-in-out -74s infinite alternate;
          animation: hr26 30s ease-in-out -74s infinite alternate;
}
@-webkit-keyframes hr26 {
  0% {
    border: solid 2px #37eefb;
    box-shadow: 0 0 5px #e74bb3, 0 0 5px #e74bb3 inset;
    -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg);
            transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #fc33ff;
    box-shadow: 0 0 5px #665ad8, 0 0 5px #665ad8 inset;
    -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg);
            transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg);
    width: 35px;
  }
}
@keyframes hr26 {
  0% {
    border: solid 2px #37eefb;
    box-shadow: 0 0 5px #e74bb3, 0 0 5px #e74bb3 inset;
    -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg);
            transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #fc33ff;
    box-shadow: 0 0 5px #665ad8, 0 0 5px #665ad8 inset;
    -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg);
            transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg);
    width: 35px;
  }
}
.wrapper hr:nth-child(27) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr27 30s ease-in-out -73s infinite alternate;
          animation: hr27 30s ease-in-out -73s infinite alternate;
}
@-webkit-keyframes hr27 {
  0% {
    border: solid 2px #4133ff;
    box-shadow: 0 0 5px #33ff77, 0 0 5px #33ff77 inset;
    -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg);
            transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33ff;
    box-shadow: 0 0 5px #54c5de, 0 0 5px #54c5de inset;
    -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg);
            transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg);
    width: 41px;
  }
}
@keyframes hr27 {
  0% {
    border: solid 2px #4133ff;
    box-shadow: 0 0 5px #33ff77, 0 0 5px #33ff77 inset;
    -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg);
            transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33ff;
    box-shadow: 0 0 5px #54c5de, 0 0 5px #54c5de inset;
    -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg);
            transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg);
    width: 41px;
  }
}
.wrapper hr:nth-child(28) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr28 30s ease-in-out -72s infinite alternate;
          animation: hr28 30s ease-in-out -72s infinite alternate;
}
@-webkit-keyframes hr28 {
  0% {
    border: solid 2px #4de6cf;
    box-shadow: 0 0 5px #5656dc, 0 0 5px #5656dc inset;
    -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg);
            transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #7a33ff;
    box-shadow: 0 0 5px #36fcad, 0 0 5px #36fcad inset;
    -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg);
            transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg);
    width: 41px;
  }
}
@keyframes hr28 {
  0% {
    border: solid 2px #4de6cf;
    box-shadow: 0 0 5px #5656dc, 0 0 5px #5656dc inset;
    -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg);
            transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #7a33ff;
    box-shadow: 0 0 5px #36fcad, 0 0 5px #36fcad inset;
    -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg);
            transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg);
    width: 41px;
  }
}
.wrapper hr:nth-child(29) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr29 30s ease-in-out -71s infinite alternate;
          animation: hr29 30s ease-in-out -71s infinite alternate;
}
@-webkit-keyframes hr29 {
  0% {
    border: solid 2px #ff33b4;
    box-shadow: 0 0 5px #33ffee, 0 0 5px #33ffee inset;
    -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg);
            transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffa7;
    box-shadow: 0 0 5px #3336ff, 0 0 5px #3336ff inset;
    -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg);
            transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg);
    width: 71px;
  }
}
@keyframes hr29 {
  0% {
    border: solid 2px #ff33b4;
    box-shadow: 0 0 5px #33ffee, 0 0 5px #33ffee inset;
    -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg);
            transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffa7;
    box-shadow: 0 0 5px #3336ff, 0 0 5px #3336ff inset;
    -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg);
            transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg);
    width: 71px;
  }
}
.wrapper hr:nth-child(30) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr30 30s ease-in-out -70s infinite alternate;
          animation: hr30 30s ease-in-out -70s infinite alternate;
}
@-webkit-keyframes hr30 {
  0% {
    border: solid 2px #3bb2f7;
    box-shadow: 0 0 5px #5a46ec, 0 0 5px #5a46ec inset;
    -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg);
            transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffc2;
    box-shadow: 0 0 5px #79ea48, 0 0 5px #79ea48 inset;
    -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg);
            transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg);
    width: 51px;
  }
}
@keyframes hr30 {
  0% {
    border: solid 2px #3bb2f7;
    box-shadow: 0 0 5px #5a46ec, 0 0 5px #5a46ec inset;
    -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg);
            transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ffc2;
    box-shadow: 0 0 5px #79ea48, 0 0 5px #79ea48 inset;
    -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg);
            transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg);
    width: 51px;
  }
}
.wrapper hr:nth-child(31) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr31 30s ease-in-out -69s infinite alternate;
          animation: hr31 30s ease-in-out -69s infinite alternate;
}
@-webkit-keyframes hr31 {
  0% {
    border: solid 2px #33f5ff;
    box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
    -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg);
            transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #35fd96;
    box-shadow: 0 0 5px #f141c8, 0 0 5px #f141c8 inset;
    -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg);
            transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg);
    width: 44px;
  }
}
@keyframes hr31 {
  0% {
    border: solid 2px #33f5ff;
    box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
    -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg);
            transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #35fd96;
    box-shadow: 0 0 5px #f141c8, 0 0 5px #f141c8 inset;
    -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg);
            transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg);
    width: 44px;
  }
}
.wrapper hr:nth-child(32) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr32 30s ease-in-out -68s infinite alternate;
          animation: hr32 30s ease-in-out -68s infinite alternate;
}
@-webkit-keyframes hr32 {
  0% {
    border: solid 2px #b433ff;
    box-shadow: 0 0 5px #6633ff, 0 0 5px #6633ff inset;
    -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg);
            transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff52;
    box-shadow: 0 0 5px #7033ff, 0 0 5px #7033ff inset;
    -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg);
            transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg);
    width: 43px;
  }
}
@keyframes hr32 {
  0% {
    border: solid 2px #b433ff;
    box-shadow: 0 0 5px #6633ff, 0 0 5px #6633ff inset;
    -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg);
            transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #33ff52;
    box-shadow: 0 0 5px #7033ff, 0 0 5px #7033ff inset;
    -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg);
            transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg);
    width: 43px;
  }
}
.wrapper hr:nth-child(33) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr33 30s ease-in-out -67s infinite alternate;
          animation: hr33 30s ease-in-out -67s infinite alternate;
}
@-webkit-keyframes hr33 {
  0% {
    border: solid 2px #ff33fc;
    box-shadow: 0 0 5px #ff3385, 0 0 5px #ff3385 inset;
    -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg);
            transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3341ff;
    box-shadow: 0 0 5px #bb33ff, 0 0 5px #bb33ff inset;
    -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg);
            transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg);
    width: 33px;
  }
}
@keyframes hr33 {
  0% {
    border: solid 2px #ff33fc;
    box-shadow: 0 0 5px #ff3385, 0 0 5px #ff3385 inset;
    -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg);
            transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #3341ff;
    box-shadow: 0 0 5px #bb33ff, 0 0 5px #bb33ff inset;
    -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg);
            transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg);
    width: 33px;
  }
}
.wrapper hr:nth-child(34) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr34 30s ease-in-out -66s infinite alternate;
          animation: hr34 30s ease-in-out -66s infinite alternate;
}
@-webkit-keyframes hr34 {
  0% {
    border: solid 2px #44eea7;
    box-shadow: 0 0 5px #3cf667, 0 0 5px #3cf667 inset;
    -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg);
            transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33a7;
    box-shadow: 0 0 5px #4d36fc, 0 0 5px #4d36fc inset;
    -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg);
            transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg);
    width: 3px;
  }
}
@keyframes hr34 {
  0% {
    border: solid 2px #44eea7;
    box-shadow: 0 0 5px #3cf667, 0 0 5px #3cf667 inset;
    -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg);
            transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg);
    height: 20px;
  }
  100% {
    border: solid 2px #ff33a7;
    box-shadow: 0 0 5px #4d36fc, 0 0 5px #4d36fc inset;
    -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg);
            transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg);
    width: 3px;
  }
}
.wrapper hr:nth-child(35) {
  position: absolute;
  left: 0;
  width: 150px;
  -webkit-animation: hr35 30s ease-in-out -65s infinite alternate;
          animation: hr35 30s ease-in-out -65s infinite alternate;
}
@-webkit-keyframes hr35 {
  0% {
    border: solid 2px #63ff33;
    box-shadow: 0 0 5px #dd55cb, 0 0 5px #dd55cb inset;
    -webkit-transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(0deg);
.........完整代码请登录后点击上方下载按钮下载查看