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