div+css实现蓝色长条折叠动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现蓝色长条折叠动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body, html {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(#4f2187, #0e0031);
}

div {
  position: absolute;
  bottom: 0;
  left: 0;
}

@-webkit-keyframes boxes {
  0% {
    transform: translate(1044px, 0);
  }
  100% {
    transform: translate(1960px, 0);
  }
}

@keyframes boxes {
  0% {
    transform: translate(1044px, 0);
  }
  100% {
    transform: translate(1960px, 0);
  }
}
@-webkit-keyframes boxes_0 {
  0% {
    transform: translate(553px, 0);
  }
  50% {
    transform: translate(1542px, 0);
  }
  100% {
    transform: translate(553px, 0);
  }
}
@keyframes boxes_0 {
  0% {
    transform: translate(553px, 0);
  }
  50% {
    transform: translate(1542px, 0);
  }
  100% {
    transform: translate(553px, 0);
  }
}
div:nth-child(0) {
  height: 50%;
  width: 80px;
  transform: translate(1190px, 0);
  -webkit-animation: boxes_0 89s infinite;
          animation: boxes_0 89s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_1 {
  0% {
    transform: translate(950px, 0);
  }
  50% {
    transform: translate(602px, 0);
  }
  100% {
    transform: translate(950px, 0);
  }
}

@keyframes boxes_1 {
  0% {
    transform: translate(950px, 0);
  }
  50% {
    transform: translate(602px, 0);
  }
  100% {
    transform: translate(950px, 0);
  }
}
div:nth-child(1) {
  height: 26%;
  width: 82px;
  transform: translate(1890px, 0);
  -webkit-animation: boxes_1 101s infinite;
          animation: boxes_1 101s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_2 {
  0% {
    transform: translate(1362px, 0);
  }
  50% {
    transform: translate(1638px, 0);
  }
  100% {
    transform: translate(1362px, 0);
  }
}

@keyframes boxes_2 {
  0% {
    transform: translate(1362px, 0);
  }
  50% {
    transform: translate(1638px, 0);
  }
  100% {
    transform: translate(1362px, 0);
  }
}
div:nth-child(2) {
  height: 15%;
  width: 67px;
  transform: translate(145px, 0);
  -webkit-animation: boxes_2 104s infinite;
          animation: boxes_2 104s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_3 {
  0% {
    transform: translate(1275px, 0);
  }
  50% {
    transform: translate(328px, 0);
  }
  100% {
    transform: translate(1275px, 0);
  }
}

@keyframes boxes_3 {
  0% {
    transform: translate(1275px, 0);
  }
  50% {
    transform: translate(328px, 0);
  }
  100% {
    transform: translate(1275px, 0);
  }
}
div:nth-child(3) {
  height: 11%;
  width: 107px;
  transform: translate(1422px, 0);
  -webkit-animation: boxes_3 85s infinite;
          animation: boxes_3 85s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_4 {
  0% {
    transform: translate(1403px, 0);
  }
  50% {
    transform: translate(1754px, 0);
  }
  100% {
    transform: translate(1403px, 0);
  }
}

@keyframes boxes_4 {
  0% {
    transform: translate(1403px, 0);
  }
  50% {
    transform: translate(1754px, 0);
  }
  100% {
    transform: translate(1403px, 0);
  }
}
div:nth-child(4) {
  height: 47%;
  width: 98px;
  transform: translate(1883px, 0);
  -webkit-animation: boxes_4 72s infinite;
          animation: boxes_4 72s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_5 {
  0% {
    transform: translate(1208px, 0);
  }
  50% {
    transform: translate(1839px, 0);
  }
  100% {
    transform: translate(1208px, 0);
  }
}

@keyframes boxes_5 {
  0% {
    transform: translate(1208px, 0);
  }
  50% {
    transform: translate(1839px, 0);
  }
  100% {
    transform: translate(1208px, 0);
  }
}
div:nth-child(5) {
  height: 16%;
  width: 60px;
  transform: translate(449px, 0);
  -webkit-animation: boxes_5 80s infinite;
          animation: boxes_5 80s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_6 {
  0% {
    transform: translate(683px, 0);
  }
  50% {
    transform: translate(739px, 0);
  }
  100% {
    transform: translate(683px, 0);
  }
}

@keyframes boxes_6 {
  0% {
    transform: translate(683px, 0);
  }
  50% {
    transform: translate(739px, 0);
  }
  100% {
    transform: translate(683px, 0);
  }
}
div:nth-child(6) {
  height: 13%;
  width: 96px;
  transform: translate(168px, 0);
  -webkit-animation: boxes_6 70s infinite;
          animation: boxes_6 70s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_7 {
  0% {
    transform: translate(1638px, 0);
  }
  50% {
    transform: translate(1487px, 0);
  }
  100% {
    transform: translate(1638px, 0);
  }
}

@keyframes boxes_7 {
  0% {
    transform: translate(1638px, 0);
  }
  50% {
    transform: translate(1487px, 0);
  }
  100% {
    transform: translate(1638px, 0);
  }
}
div:nth-child(7) {
  height: 61%;
  width: 63px;
  transform: translate(700px, 0);
  -webkit-animation: boxes_7 79s infinite;
          animation: boxes_7 79s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_8 {
  0% {
    transform: translate(25px, 0);
  }
  50% {
    transform: translate(548px, 0);
  }
  100% {
    transform: translate(25px, 0);
  }
}

@keyframes boxes_8 {
  0% {
    transform: translate(25px, 0);
  }
  50% {
    transform: translate(548px, 0);
  }
  100% {
    transform: translate(25px, 0);
  }
}
div:nth-child(8) {
  height: 15%;
  width: 74px;
  transform: translate(1198px, 0);
  -webkit-animation: boxes_8 51s infinite;
          animation: boxes_8 51s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_9 {
  0% {
    transform: translate(322px, 0);
  }
  50% {
    transform: translate(850px, 0);
  }
  100% {
    transform: translate(322px, 0);
  }
}

@keyframes boxes_9 {
  0% {
    transform: translate(322px, 0);
  }
  50% {
    transform: translate(850px, 0);
  }
  100% {
    transform: translate(322px, 0);
  }
}
div:nth-child(9) {
  height: 49%;
  width: 51px;
  transform: translate(1711px, 0);
  -webkit-animation: boxes_9 62s infinite;
          animation: boxes_9 62s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_10 {
  0% {
    transform: translate(716px, 0);
  }
  50% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(716px, 0);
  }
}

@keyframes boxes_10 {
  0% {
    transform: translate(716px, 0);
  }
  50% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(716px, 0);
  }
}
div:nth-child(10) {
  height: 23%;
  width: 102px;
  transform: translate(520px, 0);
  -webkit-animation: boxes_10 100s infinite;
          animation: boxes_10 100s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_11 {
  0% {
    transform: translate(955px, 0);
  }
  50% {
    transform: translate(382px, 0);
  }
  100% {
    transform: translate(955px, 0);
  }
}

@keyframes boxes_11 {
  0% {
    transform: translate(955px, 0);
  }
  50% {
    transform: translate(382px, 0);
  }
  100% {
    transform: translate(955px, 0);
  }
}
div:nth-child(11) {
  height: 48%;
  width: 95px;
  transform: translate(248px, 0);
  -webkit-animation: boxes_11 91s infinite;
          animation: boxes_11 91s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_12 {
  0% {
    transform: translate(885px, 0);
  }
  50% {
    transform: translate(126px, 0);
  }
  100% {
    transform: translate(885px, 0);
  }
}

@keyframes boxes_12 {
  0% {
    transform: translate(885px, 0);
  }
  50% {
    transform: translate(126px, 0);
  }
  100% {
    transform: translate(885px, 0);
  }
}
div:nth-child(12) {
  height: 24%;
  width: 61px;
  transform: translate(723px, 0);
  -webkit-animation: boxes_12 86s infinite;
          animation: boxes_12 86s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_13 {
  0% {
    transform: translate(393px, 0);
  }
  50% {
    transform: translate(548px, 0);
  }
  100% {
    transform: translate(393px, 0);
  }
}

@keyframes boxes_13 {
  0% {
    transform: translate(393px, 0);
  }
  50% {
    transform: translate(548px, 0);
  }
  100% {
    transform: translate(393px, 0);
  }
}
div:nth-child(13) {
  height: 37%;
  width: 65px;
  transform: translate(1907px, 0);
  -webkit-animation: boxes_13 72s infinite;
          animation: boxes_13 72s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_14 {
  0% {
    transform: translate(1935px, 0);
  }
  50% {
    transform: translate(799px, 0);
  }
  100% {
    transform: translate(1935px, 0);
  }
}

@keyframes boxes_14 {
  0% {
    transform: translate(1935px, 0);
  }
  50% {
    transform: translate(799px, 0);
  }
  100% {
    transform: translate(1935px, 0);
  }
}
div:nth-child(14) {
  height: 23%;
  width: 98px;
  transform: translate(1367px, 0);
  -webkit-animation: boxes_14 68s infinite;
          animation: boxes_14 68s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_15 {
  0% {
    transform: translate(529px, 0);
  }
  50% {
    transform: translate(822px, 0);
  }
  100% {
    transform: translate(529px, 0);
  }
}

@keyframes boxes_15 {
  0% {
    transform: translate(529px, 0);
  }
  50% {
    transform: translate(822px, 0);
  }
  100% {
    transform: translate(529px, 0);
  }
}
div:nth-child(15) {
  height: 65%;
  width: 89px;
  transform: translate(978px, 0);
  -webkit-animation: boxes_15 74s infinite;
          animation: boxes_15 74s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_16 {
  0% {
    transform: translate(561px, 0);
  }
  50% {
    transform: translate(761px, 0);
  }
  100% {
    transform: translate(561px, 0);
  }
}

@keyframes boxes_16 {
  0% {
    transform: translate(561px, 0);
  }
  50% {
    transform: translate(761px, 0);
  }
  100% {
    transform: translate(561px, 0);
  }
}
div:nth-child(16) {
  height: 25%;
  width: 97px;
  transform: translate(214px, 0);
  -webkit-animation: boxes_16 54s infinite;
          animation: boxes_16 54s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_17 {
  0% {
    transform: translate(1103px, 0);
  }
  50% {
    transform: translate(1065px, 0);
  }
  100% {
    transform: translate(1103px, 0);
  }
}

@keyframes boxes_17 {
  0% {
    transform: translate(1103px, 0);
  }
  50% {
    transform: translate(1065px, 0);
  }
  100% {
    transform: translate(1103px, 0);
  }
}
div:nth-child(17) {
  height: 69%;
  width: 88px;
  transform: translate(416px, 0);
  -webkit-animation: boxes_17 86s infinite;
          animation: boxes_17 86s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_18 {
  0% {
    transform: translate(1521px, 0);
  }
  50% {
    transform: translate(171px, 0);
  }
  100% {
    transform: translate(1521px, 0);
  }
}

@keyframes boxes_18 {
  0% {
    transform: translate(1521px, 0);
  }
  50% {
    transform: translate(171px, 0);
  }
  100% {
    transform: translate(1521px, 0);
  }
}
div:nth-child(18) {
  height: 41%;
  width: 56px;
  transform: translate(1969px, 0);
  -webkit-animation: boxes_18 66s infinite;
          animation: boxes_18 66s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_19 {
  0% {
    transform: translate(1294px, 0);
  }
  50% {
    transform: translate(1363px, 0);
  }
  100% {
    transform: translate(1294px, 0);
  }
}

@keyframes boxes_19 {
  0% {
    transform: translate(1294px, 0);
  }
  50% {
    transform: translate(1363px, 0);
  }
  100% {
    transform: translate(1294px, 0);
  }
}
div:nth-child(19) {
  height: 45%;
  width: 77px;
  transform: translate(653px, 0);
  -webkit-animation: boxes_19 63s infinite;
          animation: boxes_19 63s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_20 {
  0% {
    transform: translate(38px, 0);
  }
  50% {
    transform: translate(1615px, 0);
  }
  100% {
    transform: translate(38px, 0);
  }
}

@keyframes boxes_20 {
  0% {
    transform: translate(38px, 0);
  }
  50% {
    transform: translate(1615px, 0);
  }
  100% {
    transform: translate(38px, 0);
  }
}
div:nth-child(20) {
  height: 12%;
  width: 84px;
  transform: translate(1055px, 0);
  -webkit-animation: boxes_20 64s infinite;
          animation: boxes_20 64s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_21 {
  0% {
    transform: translate(1818px, 0);
  }
  50% {
    transform: translate(326px, 0);
  }
  100% {
    transform: translate(1818px, 0);
  }
}

@keyframes boxes_21 {
  0% {
    transform: translate(1818px, 0);
  }
  50% {
    transform: translate(326px, 0);
  }
  100% {
    transform: translate(1818px, 0);
  }
}
div:nth-child(21) {
  height: 13%;
  width: 55px;
  transform: translate(1206px, 0);
  -webkit-animation: boxes_21 84s infinite;
          animation: boxes_21 84s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_22 {
  0% {
    transform: translate(1002px, 0);
  }
  50% {
    transform: translate(948px, 0);
  }
  100% {
    transform: translate(1002px, 0);
  }
}

@keyframes boxes_22 {
  0% {
    transform: translate(1002px, 0);
  }
  50% {
    transform: translate(948px, 0);
  }
  100% {
    transform: translate(1002px, 0);
  }
}
div:nth-child(22) {
  height: 57%;
  width: 55px;
  transform: translate(351px, 0);
  -webkit-animation: boxes_22 63s infinite;
          animation: boxes_22 63s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_23 {
  0% {
    transform: translate(246px, 0);
  }
  50% {
    transform: translate(829px, 0);
  }
  100% {
    transform: translate(246px, 0);
  }
}

@keyframes boxes_23 {
  0% {
    transform: translate(246px, 0);
  }
  50% {
    transform: translate(829px, 0);
  }
  100% {
    transform: translate(246px, 0);
  }
}
div:nth-child(23) {
  height: 17%;
  width: 66px;
  transform: translate(2000px, 0);
  -webkit-animation: boxes_23 79s infinite;
          animation: boxes_23 79s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_24 {
  0% {
    transform: translate(71px, 0);
  }
  50% {
    transform: translate(1868px, 0);
  }
  100% {
    transform: translate(71px, 0);
  }
}

@keyframes boxes_24 {
  0% {
    transform: translate(71px, 0);
  }
  50% {
    transform: translate(1868px, 0);
  }
  100% {
    transform: translate(71px, 0);
  }
}
div:nth-child(24) {
  height: 22%;
  width: 64px;
  transform: translate(1404px, 0);
  -webkit-animation: boxes_24 65s infinite;
          animation: boxes_24 65s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_25 {
  0% {
    transform: translate(268px, 0);
  }
  50% {
    transform: translate(163px, 0);
  }
  100% {
    transform: translate(268px, 0);
  }
}

@keyframes boxes_25 {
  0% {
    transform: translate(268px, 0);
  }
  50% {
    transform: translate(163px, 0);
  }
  100% {
    transform: translate(268px, 0);
  }
}
div:nth-child(25) {
  height: 33%;
  width: 51px;
  transform: translate(975px, 0);
  -webkit-animation: boxes_25 88s infinite;
          animation: boxes_25 88s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_26 {
  0% {
    transform: translate(1939px, 0);
  }
  50% {
    transform: translate(139px, 0);
  }
  100% {
    transform: translate(1939px, 0);
  }
}

@keyframes boxes_26 {
  0% {
    transform: translate(1939px, 0);
  }
  50% {
    transform: translate(139px, 0);
  }
  100% {
    transform: translate(1939px, 0);
  }
}
div:nth-child(26) {
  height: 64%;
  width: 75px;
  transform: translate(1764px, 0);
  -webkit-animation: boxes_26 85s infinite;
          animation: boxes_26 85s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_27 {
  0% {
    transform: translate(35px, 0);
  }
  50% {
    transform: translate(1063px, 0);
  }
  100% {
    transform: translate(35px, 0);
  }
}

@keyframes boxes_27 {
  0% {
    transform: translate(35px, 0);
  }
  50% {
    transform: translate(1063px, 0);
  }
  100% {
    transform: translate(35px, 0);
  }
}
div:nth-child(27) {
  height: 50%;
  width: 68px;
  transform: translate(1286px, 0);
  -webkit-animation: boxes_27 66s infinite;
          animation: boxes_27 66s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_28 {
  0% {
    transform: translate(1096px, 0);
  }
  50% {
    transform: translate(1412px, 0);
  }
  100% {
    transform: translate(1096px, 0);
  }
}

@keyframes boxes_28 {
  0% {
    transform: translate(1096px, 0);
  }
  50% {
    transform: translate(1412px, 0);
  }
  100% {
    transform: translate(1096px, 0);
  }
}
div:nth-child(28) {
  height: 23%;
  width: 91px;
  transform: translate(532px, 0);
  -webkit-animation: boxes_28 78s infinite;
          animation: boxes_28 78s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_29 {
  0% {
    transform: translate(631px, 0);
  }
  50% {
    transform: translate(922px, 0);
  }
  100% {
    transform: translate(631px, 0);
  }
}

@keyframes boxes_29 {
  0% {
    transform: translate(631px, 0);
  }
  50% {
    transform: translate(922px, 0);
  }
  100% {
    transform: translate(631px, 0);
  }
}
div:nth-child(29) {
  height: 27%;
  width: 82px;
  transform: translate(1052px, 0);
  -webkit-animation: boxes_29 79s infinite;
          animation: boxes_29 79s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_30 {
  0% {
    transform: translate(441px, 0);
  }
  50% {
    transform: translate(263px, 0);
  }
  100% {
    transform: translate(441px, 0);
  }
}

@keyframes boxes_30 {
  0% {
    transform: translate(441px, 0);
  }
  50% {
    transform: translate(263px, 0);
  }
  100% {
    transform: translate(441px, 0);
  }
}
div:nth-child(30) {
  height: 15%;
  width: 76px;
  transform: translate(603px, 0);
  -webkit-animation: boxes_30 62s infinite;
          animation: boxes_30 62s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_31 {
  0% {
    transform: translate(862px, 0);
  }
  50% {
    transform: translate(752px, 0);
  }
  100% {
    transform: translate(862px, 0);
  }
}

@keyframes boxes_31 {
  0% {
    transform: translate(862px, 0);
  }
  50% {
    transform: translate(752px, 0);
  }
  100% {
    transform: translate(862px, 0);
  }
}
div:nth-child(31) {
  height: 51%;
  width: 63px;
  transform: translate(1167px, 0);
  -webkit-animation: boxes_31 82s infinite;
          animation: boxes_31 82s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_32 {
  0% {
    transform: translate(648px, 0);
  }
  50% {
    transform: translate(650px, 0);
  }
  100% {
    transform: translate(648px, 0);
  }
}

@keyframes boxes_32 {
  0% {
    transform: translate(648px, 0);
  }
  50% {
    transform: translate(650px, 0);
  }
  100% {
    transform: translate(648px, 0);
  }
}
div:nth-child(32) {
  height: 45%;
  width: 108px;
  transform: translate(957px, 0);
  -webkit-animation: boxes_32 77s infinite;
          animation: boxes_32 77s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_33 {
  0% {
    transform: translate(703px, 0);
  }
  50% {
    transform: translate(147px, 0);
  }
  100% {
    transform: translate(703px, 0);
  }
}

@keyframes boxes_33 {
  0% {
    transform: translate(703px, 0);
  }
  50% {
    transform: translate(147px, 0);
  }
  100% {
    transform: translate(703px, 0);
  }
}
div:nth-child(33) {
  height: 59%;
  width: 106px;
  transform: translate(1724px, 0);
  -webkit-animation: boxes_33 59s infinite;
          animation: boxes_33 59s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_34 {
  0% {
    transform: translate(707px, 0);
  }
  50% {
    transform: translate(664px, 0);
  }
  100% {
    transform: translate(707px, 0);
  }
}

@keyframes boxes_34 {
  0% {
    transform: translate(707px, 0);
  }
  50% {
    transform: translate(664px, 0);
  }
  100% {
    transform: translate(707px, 0);
  }
}
div:nth-child(34) {
  height: 18%;
  width: 95px;
  transform: translate(1268px, 0);
  -webkit-animation: boxes_34 75s infinite;
          animation: boxes_34 75s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_35 {
  0% {
    transform: translate(715px, 0);
  }
  50% {
    transform: translate(1811px, 0);
  }
  100% {
    transform: translate(715px, 0);
  }
}

@keyframes boxes_35 {
  0% {
    transform: translate(715px, 0);
  }
  50% {
    transform: translate(1811px, 0);
  }
  100% {
    transform: translate(715px, 0);
  }
}
div:nth-child(35) {
  height: 47%;
  width: 68px;
  transform: translate(1170px, 0);
  -webkit-animation: boxes_35 84s infinite;
          animation: boxes_35 84s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_36 {
  0% {
    transform: translate(65px, 0);
  }
  50% {
    transform: translate(1343px, 0);
  }
  100% {
    transform: translate(65px, 0);
  }
}

@keyframes boxes_36 {
  0% {
    transform: translate(65px, 0);
  }
  50% {
    transform: translate(1343px, 0);
  }
  100% {
    transform: translate(65px, 0);
  }
}
div:nth-child(36) {
  height: 38%;
  width: 82px;
  transform: translate(347px, 0);
  -webkit-animation: boxes_36 76s infinite;
          animation: boxes_36 76s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_37 {
  0% {
    transform: translate(833px, 0);
  }
  50% {
    transform: translate(1146px, 0);
  }
  100% {
    transform: translate(833px, 0);
  }
}

@keyframes boxes_37 {
  0% {
    transform: translate(833px, 0);
  }
  50% {
    transform: translate(1146px, 0);
  }
  100% {
    transform: translate(833px, 0);
  }
}
div:nth-child(37) {
  height: 65%;
  width: 83px;
  transform: translate(974px, 0);
  -webkit-animation: boxes_37 88s infinite;
          animation: boxes_37 88s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_38 {
  0% {
    transform: translate(681px, 0);
  }
  50% {
    transform: translate(442px, 0);
  }
  100% {
    transform: translate(681px, 0);
  }
}

@keyframes boxes_38 {
  0% {
    transform: translate(681px, 0);
  }
  50% {
    transform: translate(442px, 0);
  }
  100% {
    transform: translate(681px, 0);
  }
}
div:nth-child(38) {
  height: 65%;
  width: 97px;
  transform: translate(730px, 0);
  -webkit-animation: boxes_38 93s infinite;
          animation: boxes_38 93s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_39 {
  0% {
    transform: translate(1978px, 0);
  }
  50% {
    transform: translate(1744px, 0);
  }
  100% {
    transform: translate(1978px, 0);
  }
}

@keyframes boxes_39 {
  0% {
    transform: translate(1978px, 0);
  }
  50% {
    transform: translate(1744px, 0);
  }
  100% {
    transform: translate(1978px, 0);
  }
}
div:nth-child(39) {
  height: 26%;
  width: 94px;
  transform: translate(1199px, 0);
  -webkit-animation: boxes_39 108s infinite;
          animation: boxes_39 108s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_40 {
  0% {
    transform: translate(662px, 0);
  }
  50% {
    transform: translate(458px, 0);
  }
  100% {
    transform: translate(662px, 0);
  }
}

@keyframes boxes_40 {
  0% {
    transform: translate(662px, 0);
  }
  50% {
    transform: translate(458px, 0);
  }
  100% {
    transform: translate(662px, 0);
  }
}
div:nth-child(40) {
  height: 52%;
  width: 101px;
  transform: translate(1843px, 0);
  -webkit-animation: boxes_40 88s infinite;
          animation: boxes_40 88s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_41 {
  0% {
    transform: translate(1607px, 0);
  }
  50% {
    transform: translate(1553px, 0);
  }
  100% {
    transform: translate(1607px, 0);
  }
}

@keyframes boxes_41 {
  0% {
    transform: translate(1607px, 0);
  }
  50% {
    transform: translate(1553px, 0);
  }
  100% {
    transform: translate(1607px, 0);
  }
}
div:nth-child(41) {
  height: 35%;
  width: 100px;
  transform: translate(772px, 0);
  -webkit-animation: boxes_41 54s infinite;
          animation: boxes_41 54s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_42 {
  0% {
    transform: translate(1182px, 0);
  }
  50% {
    transform: translate(1903px, 0);
  }
  100% {
    transform: translate(1182px, 0);
  }
}

@keyframes boxes_42 {
  0% {
    transform: translate(1182px, 0);
  }
  50% {
    transform: translate(1903px, 0);
  }
  100% {
    transform: translate(1182px, 0);
  }
}
div:nth-child(42) {
  height: 48%;
  width: 61px;
  transform: translate(1339px, 0);
  -webkit-animation: boxes_42 52s infinite;
          animation: boxes_42 52s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_43 {
  0% {
    transform: translate(573px, 0);
  }
  50% {
    transform: translate(890px, 0);
  }
  100% {
    transform: translate(573px, 0);
  }
}

@keyframes boxes_43 {
  0% {
    transform: translate(573px, 0);
  }
  50% {
    transform: translate(890px, 0);
  }
  100% {
    transform: translate(573px, 0);
  }
}
div:nth-child(43) {
  height: 48%;
  width: 80px;
  transform: translate(878px, 0);
  -webkit-animation: boxes_43 90s infinite;
          animation: boxes_43 90s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_44 {
  0% {
    transform: translate(1227px, 0);
  }
  50% {
    transform: translate(1112px, 0);
  }
  100% {
    transform: translate(1227px, 0);
  }
}

@keyframes boxes_44 {
  0% {
    transform: translate(1227px, 0);
  }
  50% {
    transform: translate(1112px, 0);
  }
  100% {
    transform: translate(1227px, 0);
  }
}
div:nth-child(44) {
  height: 67%;
  width: 87px;
  transform: translate(1482px, 0);
  -webkit-animation: boxes_44 91s infinite;
          animation: boxes_44 91s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_45 {
  0% {
    transform: translate(1275px, 0);
  }
  50% {
    transform: translate(716px, 0);
  }
  100% {
    transform: translate(1275px, 0);
  }
}

@keyframes boxes_45 {
  0% {
    transform: translate(1275px, 0);
  }
  50% {
    transform: translate(716px, 0);
  }
  100% {
    transform: translate(1275px, 0);
  }
}
div:nth-child(45) {
  height: 16%;
  width: 110px;
  transform: translate(58px, 0);
  -webkit-animation: boxes_45 99s infinite;
          animation: boxes_45 99s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_46 {
  0% {
    transform: translate(1638px, 0);
  }
  50% {
    transform: translate(1125px, 0);
  }
  100% {
    transform: translate(1638px, 0);
  }
}

@keyframes boxes_46 {
  0% {
    transform: translate(1638px, 0);
  }
  50% {
    transform: translate(1125px, 0);
  }
  100% {
    transform: translate(1638px, 0);
  }
}
div:nth-child(46) {
  height: 32%;
  width: 64px;
  transform: translate(86px, 0);
  -webkit-animation: boxes_46 86s infinite;
          animation: boxes_46 86s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_47 {
  0% {
    transform: translate(35px, 0);
  }
  50% {
    transform: translate(47px, 0);
  }
  100% {
    transform: translate(35px, 0);
  }
}

@keyframes boxes_47 {
  0% {
    transform: translate(35px, 0);
  }
  50% {
    transform: translate(47px, 0);
  }
  100% {
    transform: translate(35px, 0);
  }
}
div:nth-child(47) {
  height: 54%;
  width: 108px;
  transform: translate(770px, 0);
  -webkit-animation: boxes_47 60s infinite;
          animation: boxes_47 60s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_48 {
  0% {
    transform: translate(1565px, 0);
  }
  50% {
    transform: translate(1721px, 0);
  }
  100% {
    transform: translate(1565px, 0);
  }
}

@keyframes boxes_48 {
  0% {
    transform: translate(1565px, 0);
  }
  50% {
    transform: translate(1721px, 0);
  }
  100% {
    transform: translate(1565px, 0);
  }
}
div:nth-child(48) {
  height: 47%;
  width: 58px;
  transform: translate(1649px, 0);
  -webkit-animation: boxes_48 81s infinite;
          animation: boxes_48 81s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_49 {
  0% {
    transform: translate(1154px, 0);
  }
  50% {
    transform: translate(1775px, 0);
  }
  100% {
    transform: translate(1154px, 0);
  }
}

@keyframes boxes_49 {
  0% {
    transform: translate(1154px, 0);
  }
  50% {
    transform: translate(1775px, 0);
  }
  100% {
    transform: translate(1154px, 0);
  }
}
div:nth-child(49) {
  height: 31%;
  width: 96px;
  transform: translate(762px, 0);
  -webkit-animation: boxes_49 86s infinite;
          animation: boxes_49 86s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_50 {
  0% {
    transform: translate(672px, 0);
  }
  50% {
    transform: translate(1194px, 0);
  }
  100% {
    transform: translate(672px, 0);
  }
}

@keyframes boxes_50 {
  0% {
    transform: translate(672px, 0);
  }
  50% {
    transform: translate(1194px, 0);
  }
  100% {
    transform: translate(672px, 0);
  }
}
div:nth-child(50) {
  height: 14%;
  width: 101px;
  transform: translate(796px, 0);
  -webkit-animation: boxes_50 94s infinite;
          animation: boxes_50 94s infinite;
  background: rgba(30, 144, 255, 0.25);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes boxes_51 {
  0% {
    transform: translate(489px, 0);
  }
  50% {
    transform: translate(1552px, 0);
  }
  100% {
    transform: translate(489px, 0);
  }
}

@keyframes boxes_51 {
  0% {
    transform: translate(489px, 0);
  }
  50% {
    transform: translate(1552px, 0);
  }
  100% {
    transform: translate(489px, 0);
  }
}
div:nth-child(51) {
  height: 31%;
  width: 82px;
  transform: translate(490px, 0);
  -webkit-animation: boxes_51 5.........完整代码请登录后点击上方下载按钮下载查看