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