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