纯css 条纹动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css 条纹动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.stripes {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.stripe {
  position: relative;
  margin: 0 1px;
  border-radius: 999px;
  -webkit-animation: motion 3s ease-in-out infinite alternate;
          animation: motion 3s ease-in-out infinite alternate;
}
.stripe::before {
  content: '';
  position: absolute;
  bottom: calc(-100% - 1px);
  height: 100%;
  width: 100%;
  background: #000;
  border-radius: 999px;
}
.stripe::after {
  content: '';
  position: absolute;
  bottom: calc(-200% - 2px);
  height: 100%;
  width: 100%;
  background: #000;
  border-radius: 999px;
}
.stripe:nth-child(1) {
  width: 13.1vw;
  height: 66%;
  background: #63d6ed;
  -webkit-animation-delay: 10ms;
          animation-delay: 10ms;
}
.stripe:nth-child(1)::before {
  background: #c7ffed;
}
.stripe:nth-child(1)::after {
  background: #63d6ed;
}
.stripe:nth-child(2) {
  width: 7.1vw;
  height: 69%;
  background: #32a1ca;
  -webkit-animation-delay: 20ms;
          animation-delay: 20ms;
}
.stripe:nth-child(2)::before {
  background: #96d3ca;
}
.stripe:nth-child(2)::after {
  background: #32a1ca;
}
.stripe:nth-child(3) {
  width: 18.1vw;
  height: 46%;
  background: #58a7c6;
  -webkit-animation-delay: 30ms;
          animation-delay: 30ms;
}
.stripe:nth-child(3)::before {
  background: #bcd9c6;
}
.stripe:nth-child(3)::after {
  background: #58a7c6;
}
.stripe:nth-child(4) {
  width: 19.1vw;
  height: 77%;
  background: #1af0a5;
  -webkit-animation-delay: 40ms;
          animation-delay: 40ms;
}
.stripe:nth-child(4)::before {
  background: #7effa5;
}
.stripe:nth-child(4)::after {
  background: #1af0a5;
}
.stripe:nth-child(5) {
  width: 5.1vw;
  height: 37%;
  background: #1fa6ee;
  -webkit-animation-delay: 50ms;
          animation-delay: 50ms;
}
.stripe:nth-child(5)::before {
  background: #83d8ee;
}
.stripe:nth-child(5)::after {
  background: #1fa6ee;
}
.stripe:nth-child(6) {
  width: 10.1vw;
  height: 70%;
  background: #1bc5f6;
  -webkit-animation-delay: 60ms;
          animation-delay: 60ms;
}
.stripe:nth-child(6)::before {
  background: #7ff7f6;
}
.stripe:nth-child(6)::after {
  background: #1bc5f6;
}
.stripe:nth-child(7) {
  width: 15.1vw;
  height: 32%;
  background: #0ad8ec;
  -webkit-animation-delay: 70ms;
          animation-delay: 70ms;
}
.stripe:nth-child(7)::before {
  background: #6effec;
}
.stripe:nth-child(7)::after {
  background: #0ad8ec;
}
.stripe:nth-child(8) {
  width: 15.1vw;
  height: 32%;
  background: #0cd7af;
  -webkit-animation-delay: 80ms;
          animation-delay: 80ms;
}
.stripe:nth-child(8)::before {
  background: #70ffaf;
}
.stripe:nth-child(8)::after {
  background: #0cd7af;
}
.stripe:nth-child(9) {
  width: 9.1vw;
  height: 53%;
  background: #48eeac;
  -webkit-animation-delay: 90ms;
          animation-delay: 90ms;
}
.stripe:nth-child(9)::before {
  background: #acffac;
}
.stripe:nth-child(9)::after {
  background: #48eeac;
}
.stripe:nth-child(10) {
  width: 20.1vw;
  height: 63%;
  background: #46b7f8;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.stripe:nth-child(10)::before {
  background: #aae9f8;
}
.stripe:nth-child(10)::after {
  background: #46b7f8;
}
.stripe:nth-child(11) {
  width: 7.1vw;
  height: 65%;
  background: #4ed8ed;
  -webkit-animation-delay: 110ms;
          animation-delay: 110ms;
}
.stripe:nth-child(11)::before {
  background: #b2ffed;
}
.stripe:nth-child(11)::after {
  background: #4ed8ed;
}
.stripe:nth-child(12) {
  width: 11.1vw;
  height: 36%;
  background: #0fd3e1;
  -webkit-animation-delay: 120ms;
          animation-delay: 120ms;
}
.stripe:nth-child(12)::before {
  background: #73ffe1;
}
.stripe:nth-child(12)::after {
  background: #0fd3e1;
}
.stripe:nth-child(13) {
  width: 17.1vw;
  height: 43%;
  background: #2ced9f;
  -webkit-animation-delay: 130ms;
          animation-delay: 130ms;
}
.stripe:nth-child(13)::before {
  background: #90ff9f;
}
.stripe:nth-child(13)::after {
  background: #2ced9f;
}
.stripe:nth-child(14) {
  width: 2.1vw;
  height: 67%;
  background: #03f6d4;
  -webkit-animation-delay: 140ms;
          animation-delay: 140ms;
}
.stripe:nth-child(14)::before {
  background: #67ffd4;
}
.stripe:nth-child(14)::after {
  background: #03f6d4;
}
.stripe:nth-child(15) {
  width: 5.1vw;
  height: 78%;
  background: #42aea2;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
.stripe:nth-child(15)::before {
  background: #a6e0a2;
}
.stripe:nth-child(15)::after {
  background: #42aea2;
}
.stripe:nth-child(16) {
  width: 18.1vw;
  height: 61%;
  background: #2af9b4;
  -webkit-animation-delay: 160ms;
          animation-delay: 160ms;
}
.stripe:nth-child(16)::before {
  background: #8effb4;
}
.stripe:nth-child(16)::after {
  background: #2af9b4;
}
.stripe:nth-child(17) {
  width: 10.1vw;
  height: 80%;
  background: #1ebdc2;
  -webkit-animation-delay: 170ms;
          animation-delay: 170ms;
}
.stripe:nth-child(17)::before {
  background: #82efc2;
}
.stripe:nth-child(17)::after {
  background: #1ebdc2;
}
.stripe:nth-child(18) {
  width: 12.1vw;
  height: 75%;
  background: #3ddef5;
  -webkit-animation-delay: 180ms;
          animation-delay: 180ms;
}
.stripe:nth-child(18)::before {
  background: #a1fff5;
}
.stripe:nth-child(18)::after {
  background: #3ddef5;
}
.stripe:nth-child(19) {
  width: 1.1vw;
  height: 47%;
  background: #59e2b1;
  -webkit-animation-delay: 190ms;
          animation-delay: 190ms;
}
.stripe:nth-child(19)::before {
  background: #bdffb1;
}
.stripe:nth-child(19)::after {
  background: #59e2b1;
}
.stripe:nth-child(20) {
  width: 13.1vw;
  height: 40%;
  background: #21afbb;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.stripe:nth-child(20)::before {
  background: #85e1bb;
}
.stripe:nth-child(20)::after {
  background: #21afbb;
}
.stripe:nth-child(21) {
  width: 15.1vw;
  height: 67%;
  background: #37aebe;
  -webkit-animation-delay: 210ms;
          animation-delay: 210ms;
}
.stripe:nth-child(21)::before {
  background: #9be0be;
}
.stripe:nth-child(21)::after {
  background: #37aebe;
}
.stripe:nth-child(22) {
  width: 13.1vw;
  height: 45%;
  background: #42faec;
  -webkit-animation-delay: 220ms;
          animation-delay: 220ms;
}
.stripe:nth-child(22)::before {
  background: #a6ffec;
}
.stripe:nth-child(22)::after {
  background: #42faec;
}
.stripe:nth-child(23) {
  width: 5.1vw;
  height: 32%;
  background: #5cd2d6;
  -webkit-animation-delay: 230ms;
          animation-delay: 230ms;
}
.stripe:nth-child(23)::before {
  background: #c0ffd6;
}
.stripe:nth-child(23)::after {
  background: #5cd2d6;
}
.stripe:nth-child(24) {
  width: 7.1vw;
  height: 78%;
  background: #1ab4f3;
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
}
.stripe:nth-child(24)::before {
  background: #7ee6f3;
}
.stripe:nth-child(24)::after {
  background: #1ab4f3;
}
.stripe:nth-child(25) {
  width: 13.1vw;
  height: 78%;
  background: #0bd7c2;
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
}
.stripe:nth-child(25)::before {
  background: #6fffc2;
}
.stripe:nth-child(25)::after {
  background: #0bd7c2;
}
.stripe:nth-child(26) {
  width: 8.1vw;
  height: 36%;
  background: #09faec;
  -webkit-animation-delay: 260ms;
          animation-delay: 260ms;
}
.stripe:nth-child(26)::before {
  background: #6dffec;
}
.stripe:nth-child(26)::after {
  background: #09faec;
}
.stripe:nth-child(27) {
  width: 10.1vw;
  height: 66%;
  background: #61c2a8;
  -webkit-animation-delay: 270ms;
          animation-delay: 270ms;
}
.stripe:nth-child(27)::before {
  background: #c5f4a8;
}
.stripe:nth-child(27)::after {
  background: #61c2a8;
}
.stripe:nth-child(28) {
  width: 5.1vw;
  height: 32%;
  background: #29b7d6;
  -webkit-animation-delay: 280ms;
          animation-delay: 280ms;
}
.stripe:nth-child(28)::before {
  background: #8de9d6;
}
.stripe:nth-child(28)::after {
  background: #29b7d6;
}
.stripe:nth-child(29) {
  width: 6.1vw;
  height: 35%;
  background: #34b2c6;
  -webkit-animation-delay: 290ms;
          animation-delay: 290ms;
}
.stripe:nth-child(29)::before {
  background: #98e4c6;
}
.stripe:nth-child(29)::after {
  background: #34b2c6;
}
.stripe:nth-child(30) {
  width: 15.1vw;
  height: 38%;
  background: #53a6e9;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
.stripe:nth-child(30)::before {
  background: #b7d8e9;
}
.stripe:nth-child(30)::after {
  background: #53a6e9;
}
.stripe:nth-child(31) {
  width: 7.1vw;
  height: 50%;
  background: #45f1ff;
  -webkit-animation-delay: 310ms;
          animation-delay: 310ms;
}
.stripe:nth-child(31)::before {
  background: #a9ffff;
}
.stripe:nth-child(31)::after {
  background: #45f1ff;
}
.stripe:nth-child(32) {
  width: 8.1vw;
  height: 70%;
  background: #4a9fb9;
  -webkit-animation-delay: 320ms;
          animation-delay: 320ms;
}
.stripe:nth-child(32)::before {
  background: #aed1b9;
}
.stripe:nth-child(32)::after {
  background: #4a9fb9;
}
.stripe:nth-child(33) {
  width: 7.1vw;
  height: 48%;
  background: #3da8b6;
  -webkit-animation-delay: 330ms;
          animation-delay: 330ms;
}
.stripe:nth-child(33)::before {
  background: #a1dab6;
}
.stripe:nth-child(33)::after {
  background: #3da8b6;
}
.stripe:nth-child(34) {
  width: 18.1vw;
  height: 79%;
  background: #1ee49f;
  -webkit-animation-delay: 340ms;
          animation-delay: 340ms;
}
.stripe:nth-child(34)::before {
  background: #82ff9f;
}
.stripe:nth-child(34)::after {
  background: #1ee49f;
}
.stripe:nth-child(35) {
  width: 6.1vw;
  height: 70%;
  background: #0ff5aa;
  -webkit-animation-delay: 350ms;
          animation-delay: 350ms;
}
.stripe:nth-child(35)::before {
  background: #73ffaa;
}
.stripe:nth-child(35)::after {
  background: #0ff5aa;
}
.stripe:nth-child(36) {
  width: 1.1vw;
  height: 74%;
  background: #17f0e7;
  -webkit-animation-delay: 360ms;
          animation-delay: 360ms;
}
.stripe:nth-child(36)::before {
  background: #7bffe7;
}
.stripe:nth-child(36)::after {
  background: #17f0e7;
}
.stripe:nth-child(37) {
  width: 4.1vw;
  height: 69%;
  background: #07edeb;
  -webkit-animation-delay: 370ms;
          animation-delay: 370ms;
}
.stripe:nth-child(37)::before {
  background: #6bffeb;
}
.stripe:nth-child(37)::after {
  background: #07edeb;
}
.stripe:nth-child(38) {
  width: 17.1vw;
  height: 42%;
  background: #19c3f3;
  -webkit-animation-delay: 380ms;
          animation-delay: 380ms;
}
.stripe:nth-child(38)::before {
  background: #7df5f3;
}
.stripe:nth-child(38)::after {
  background: #19c3f3;
}
.stripe:nth-child(39) {
  width: 5.1vw;
  height: 68%;
  background: #0db5e5;
  -webkit-animation-delay: 390ms;
          animation-delay: 390ms;
}
.stripe:nth-child(39)::before {
  background: #71e7e5;
}
.stripe:nth-child(39)::after {
  background: #0db5e5;
}
.stripe:nth-child(40) {
  width: 2.1vw;
  height: 45%;
  background: #2babb3;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.stripe:nth-child(40)::before {
  background: #8fddb3;
}
.stripe:nth-child(40)::after {
  background: #2babb3;
}
.stripe:nth-child(41) {
  width: 15.1vw;
  height: 39%;
  background: #41bc9c;
  -webkit-animation-delay: 410ms;
          animation-delay: 410ms;
}
.stripe:nth-child(41)::before {
  background: #a5ee9c;
}
.stripe:nth-child(41)::after {
  background: #41bc9c;
}
.stripe:nth-child(42) {
  width: 5.1vw;
  height: 71%;
  background: #47a2b3;
  -webkit-animation-delay: 420ms;
          animation-delay: 420ms;
}
.stripe:nth-child(42)::before {
  background: #abd4b3;
}
.stripe:nth-child(42)::after {
  background: #47a2b3;
}
.stripe:nth-child(43) {
  width: 12.1vw;
  height: 65%;
  background: #11bed0;
  -webkit-animation-delay: 430ms;
          animation-delay: 430ms;
}
.stripe:nth-child(43)::before {
  background: #75f0d0;
}
.stripe:nth-child(43)::after {
  background: #11bed0;
}
.stripe:nth-child(44) {
  width: 7.1vw;
  height: 33%;
  background: #40ffd1;
  -webkit-animation-delay: 440ms;
          animation-delay: 440ms;
}
.stripe:nth-child(44)::before {
  background: #a4ffd1;
}
.stripe:nth-child(44)::after {
  background: #40ffd1;
}
.stripe:nth-child(45) {
  width: 15.1vw;
  height: 37%;
  background: #52f6c4;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}
.stripe:nth-child(45)::before {
  background: #b6ffc4;
}
.stripe:nth-child(45)::after {
  background: #52f6c4;
}
.stripe:nth-child(46) {
  width: 10.1vw;
  height: 58%;
  background: #46d4c8;
  -webkit-animation-delay: 460ms;
          animation-delay: 460ms;
}
.stripe:nth-child(46)::before {
  background: #aaffc8;
}
.stripe:nth-child(46)::after {
  background: #46d4c8;
}
.stripe:nth-child(47) {
  width: 16.1vw;
  height: 53%;
  background: #18f1a8;
  -webkit-animation-delay: 470ms;
          animation-delay: 470ms;
}
.stripe:nth-child(47)::before {
  background: #7cffa8;
}
.stripe:nth-child(47)::after {
  background: #18f1a8;
}
.stripe:nth-child(48) {
  width: 10.1vw;
  height: 50%;
  background: #58feb4;
  -webkit-animation-delay: 480ms;
          animation-delay: 480ms;
}
.stripe:nth-child(48)::before {
  background: #bcffb4;
}
.stripe:nth-child(48)::after {
  background: #58feb4;
}
.stripe:nth-child(49) {
  width: 7.1vw;
  height: 79%;
  background: #5cfaef;
  -webkit-animation-delay: 490ms;
          animation-delay: 490ms;
}
.stripe:nth-child(49)::before {
  background: #c0ffef;
}
.stripe:nth-child(49)::after {
  background: #5cfaef;
}
.stripe:nth-child(50) {
  width: 10.1vw;
  height: 77%;
  background: #4ab5b9;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
.stripe:nth-child(50)::before {
  background: #aee7b9;
}
.stripe:nth-child(50)::after {
  background: #4ab5b9;
}
.stripe:nth-child(51) {
  width: 19.1vw;
  height: 70%;
  background: #31d09e;
  -webkit-animation-delay: 510ms;
          animation-delay: 510ms;
}
.stripe:nth-child(51)::before {
  background: #95ff9e;
}
.stripe:nth-child(51)::after {
  background: #31d09e;
}
.stripe:nth-child(52) {
  width: 9.1vw;
  height: 55%;
  background: #329fb9;
  -webkit-animation-delay: 520ms;
          animation-delay: 520ms;
}
.stripe:nth-child(52)::before {
  background: #96d1b9;
}
.stripe:nth-child(52)::after {
  background: #329fb9;
}
.stripe:nth-child(53) {
  width: 10.1vw;
  height: 51%;
  background: #01d5f0;
  -webkit-animation-delay: 530ms;
          animation-delay: 530ms;
}
.stripe:nth-child(53)::before {
  background: #65fff0;
}
.stripe:nth-child(53)::after {
  background: #01d5f0;
}
.stripe:nth-child(54) {
  width: 11.1vw;
  height: 60%;
  background: #48ada2;
  -webkit-animation-delay: 540ms;
          animation-delay: 540ms;
}
.stripe:nth-child(54)::before {
  background: #acdfa2;
}
.stripe:nth-child(54)::after {
  background: #48ada2;
}
.stripe:nth-child(55) {
  width: 14.1vw;
  height: 66%;
  background: #23cdbb;
  -webkit-animation-delay: 550ms;
          animation-delay: 550ms;
}
.stripe:nth-child(55)::before {
  background: #87ffbb;
}
.stripe:nth-child(55)::after {
  background: #23cdbb;
}
.stripe:nth-child(56) {
  width: 11.1vw;
  height: 80%;
  background: #25f9a9;
  -webkit-animation-delay: 560ms;
          animation-delay: 560ms;
}
.stripe:nth-child(56)::before {
  background: #89ffa9;
}
.stripe:nth-child(56)::after {
  background: #25f9a9;
}
.stripe:nth-child(57) {
  width: 17.1vw;
  height: 56%;
  background: #1ccdc0;
  -webkit-animation-delay: 570ms;
          animation-delay: 570ms;
}
.stripe:nth-child(57)::before {
  background: #80ffc0;
}
.stripe:nth-child(57)::after {
  background: #1ccdc0;
}
.stripe:nth-child(58) {
  width: 1.1vw;
  height: 64%;
  background: #13d9d4;
  -webkit-animation-delay: 580ms;
          animation-delay: 580ms;
}
.stripe:nth-child(58)::before {
  background: #77ffd4;
}
.stripe:nth-child(58)::after {
  background: #13d9d4;
}
.stripe:nth-child(59) {
  width: 19.1vw;
  height: 58%;
  background: #04fad2;
  -webkit-animation-delay: 590ms;
          animation-delay: 590ms;
}
.stripe:nth-child(59)::before {
  background: #68ffd2;
}
.stripe:nth-child(59)::after {
  background: #04fad2;
}
.stripe:nth-child(60) {
  width: 13.1vw;
  height: 49%;
  background: #2fa7b3;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.stripe:nth-child(60)::before {
  background: #93d9b3;
}
.stripe:nth-child(60)::after {
  background: #2fa7b3;
}
.stripe:nth-child(61) {
  width: 3.1vw;
  height: 68%;
  background: #5cb6dd;
  -webkit-animation-delay: 610ms;
          animation-delay: 610ms;
}
.stripe:nth-child(61)::before {
  background: #c0e8dd;
}
.stripe:nth-child(61)::after {
  background: #5cb6dd;
}
.stripe:nth-child(62) {
  width: 4.1vw;
  height: 65%;
  background: #40f0d5;
  -webkit-animation-delay: 620ms;
          animation-delay: 620ms;
}
.stripe:nth-child(62)::before {
  background: #a4ffd5;
}
.stripe:nth-child(62)::after {
  background: #40f0d5;
}
.stripe:nth-child(63) {
  width: 15.1vw;
  height: 53%;
  background: #1babab;
  -webkit-animation-delay: 630ms;
          animation-delay: 630ms;
}
.stripe:nth-child(63)::before {
  background: #7fddab;
}
.stripe:nth-child(63)::after {
  background: #1babab;
}
.stripe:nth-child(64) {
  width: 5.1vw;
  height: 48%;
  background: #16b0e2;
  -webkit-animation-delay: 640ms;
          animation-delay: 640ms;
}
.stripe:nth-child(64)::before {
  background: #7ae2e2;
}
.stripe:nth-child(64)::after {
  background: #16b0e2;
}
.stripe:nth-child(65) {
  width: 1.1vw;
  height: 69%;
  background: #2bcaef;
  -webkit-animation-delay: 650ms;
          animation-delay: 650ms;
}
.stripe:nth-child(65)::before {
  background: #8ffcef;
}
.stripe:nth-child(65)::after {
  background: #2bcaef;
}
.stripe:nth-child(66) {
  width: 15.1vw;
  height: 58%;
  background: #23fed6;
  -webkit-animation-delay: 660ms;
          animation-delay: 660ms;
}
.stripe:nth-child(66)::before {
  background: #87ffd6;
}
.stripe:nth-child(66)::after {
  background: #23fed6;
}
.stripe:nth-child(67) {
  width: 18.1vw;
  height: 33%;
  background: #10e4af;
  -webkit-animation-delay: 670ms;
          animation-delay: 670ms;
}
.stripe:nth-child(67)::before {
  background: #74ffaf;
}
.stripe:nth-child(67)::after {
  background: #10e4af;
}
.stripe:nth-child(68) {
  width: 1.1vw;
  height: 31%;
  background: #28ada1;
  -webkit-animation-delay: 680ms;
          animation-delay: 680ms;
}
.stripe:nth-child(68)::before {
  background: #8cdfa1;
}
.stripe:nth-child(68)::after {
  background: #28ada1;
}
.stripe:nth-child(69) {
  width: 12.1vw;
  height: 73%;
  background: #43d8f8;
  -webkit-animation-delay: 690ms;
          animation-delay: 690ms;
}
.stripe:nth-child(69)::before {
  background: #a7fff8;
}
.stripe:nth-child(69)::after {
  background: #43d8f8;
}
.stripe:nth-child(70) {
  width: 14.1vw;
  height: 49%;
  background: #61c7c0;
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
}
.stripe:nth-child(70)::before {
  background: #c5f9c0;
}
.stripe:nth-child(70)::after {
  background: #61c7c0;
}
.stripe:nth-child(71) {
  width: 13.1vw;
  height: 42%;
  background: #43e3cc;
  -webkit-animation-delay: 710ms;
          animation-delay: 710ms;
}
.stripe:nth-child(71)::before {
  background: #a7ffcc;
}
.stripe:nth-child(71)::after {
  background: #43e3cc;
}
.stripe:nth-child(72) {
  width: 5.1vw;
  height: 46%;
  background: #18bcfa;
  -webkit-animation-delay: 720ms;
          animation-delay: 720ms;
}
.stripe:nth-child(72)::before {
  background: #7ceefa;
}
.stripe:nth-child(72)::after {
  background: #18bcfa;
}
.stripe:nth-child(73) {
  width: 15.1vw;
  height: 48%;
  background: #34a8d7;
  -webkit-animation-delay: 730ms;
          animation-delay: 730ms;
}
.stripe:nth-child(73)::before {
  background: #98dad7;
}
.stripe:nth-child(73)::after {
  background: #34a8d7;
}
.stripe:nth-child(74) {
  width: 1.1vw;
  height: 75%;
  background: #28aaee;
  -webkit-animation-delay: 740ms;
          animation-delay: 740ms;
}
.stripe:nth-child(74)::before {
  background: #8cdcee;
}
.stripe:nth-child(74)::after {
  background: #28aaee;
}
.stripe:nth-child(75) {
  width: 11.1vw;
  height: 76%;
  background: #5ae9e5;
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
}
.stripe:nth-child(75)::before {
  background: #beffe5;
}
.stripe:nth-child(75)::after {
  background: #5ae9e5;
}
.stripe:nth-child(76) {
  width: 3.1vw;
  height: 60%;
  background: #51b3d9;
  -webkit-animation-delay: 760ms;
          animation-delay: 760ms;
}
.stripe:nth-child(76)::before {
  background: #b5e5d9;
}
.stripe:nth-child(76)::after {
  background: #51b3d9;
}
.stripe:nth-child(77) {
  width: 1.1vw;
  height: 71%;
  background: #16dbcf;
  -webkit-animation-delay: 770ms;
          animation-delay: 770ms;
}
.stripe:nth-child(77)::before {
  background: #7affcf;
}
.stripe:nth-child(77)::after {
  background: #16dbcf;
}
.stripe:nth-child(78) {
  width: 9.1vw;
  height: 46%;
  background: #0fc9ec;
  -webkit-animation-delay: 780ms;
          animation-delay: 780ms;
}
.stripe:nth-child(78)::before {
  background: #73fbec;
}
.stripe:nth-child(78)::after {
  background: #0fc9ec;
}
.stripe:nth-child(79) {
  width: 7.1vw;
  height: 74%;
  background: #3fd3e4;
  -webkit-animation-delay: 790ms;
          animation-delay: 790ms;
}
.stripe:nth-child(79)::before {
  background: #a3ffe4;
}
.stripe:nth-child(79)::after {
  background: #3fd3e4;
}
.stripe:nth-child(80) {
  width: 12.1vw;
  height: 56%;
  background: #05a6ed;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.stripe:nth-child(80)::before {
  background: #69d8ed;
}
.stripe:nth-child(80)::after {
  background: #05a6ed;
}
.stripe:nth-child(81) {
  width: 1.1vw;
  height: 60%;
  background: #21d6ea;
  -webkit-animation-delay: 810ms;
          animation-delay: 810ms;
}
.stripe:nth-child(81)::before {
  background: #85ffea;
}
.stripe:nth-child(81)::after {
  background: #21d6ea;
}
.stripe:nth-child(82) {
  width: 1.1vw;
  height: 57%;
  background: #63d5d8;
  -webkit-animation-delay: 820ms;
          animation-delay: 820ms;
}
.stripe:nth-child(82)::before {
  background: #c7ffd8;
}
.stripe:nth-child(82)::after {
  background: #63d5d8;
}
.stripe:nth-child(83) {
  width: 2.1vw;
  height: 66%;
  background: #19f6aa;
  -webkit-animation-delay: 830ms;
          animation-delay: 830ms;
}
.stripe:nth-child(83)::before {
  background: #7dffaa;
}
.stripe:nth-child(83)::after {
  background: #19f6aa;
}
.stripe:nth-child(84) {
  width: 15.1vw;
  height: 58%;
  background: #1ba8ac;
  -webkit-animation-delay: 840ms;
          animation-delay: 840ms;
}
.stripe:nth-child(84)::before {
  background: #7fdaac;
}
.stripe:nth-child(84)::after {
  background: #1ba8ac;
}
.stripe:nth-child(85) {
  width: 9.1vw;
  height: 38%;
  background: #18a1a8;
  -webkit-animation-delay: 850ms;
          animation-delay: 850ms;
}
.stripe:nth-child(85)::before {
  background: #7cd3a8;
}
.stripe:nth-child(85)::after {
  background: #18a1a8;
}
.stripe:nth-child(86) {
  width: 14.1vw;
  height: 49%;
  background: #22e0d2;
  -webkit-animation-delay: 860ms;
          animation-delay: 860ms;
}
.stripe:nth-child(86)::before {
  background: #86ffd2;
}
.stripe:nth-child(86)::after {
  background: #22e0d2;
}
.stripe:nth-child(87) {
  width: 1.1vw;
  height: 78%;
  background: #2fe5f2;
  -webkit-animation-delay: 870ms;
          animation-delay: 870ms;
}
.stripe:nth-child(87)::before {
  background: #93fff2;
}
.stripe:nth-child(87)::after {
  background: #2fe5f2;
}
.stripe:nth-child(88) {
  width: 13.1vw;
  height: 32%;
  background: #60fbbb;
  -webkit-animation-delay: 880ms;
          animation-delay: 880ms;
}
.stripe:nth-child(88)::before {
  background: #c4ffbb;
}
.stripe:nth-child(88)::after {
  background: #60fbbb;
}
.stripe:nth-child(89) {
  width: 8.1vw;
  height: 58%;
  background: #1ff4a2;
  -webkit-animation-delay: 890ms;
          animation-delay: 890ms;
}
.stripe:nth-child(89)::before {
  background: #83ffa2;
}
.stripe:nth-child(89)::after {
  background: #1ff4a2;
}
.stripe:nth-child(90) {
  width: 13.1vw;
  height: 76%;
  background: #03adf2;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
.stripe:nth-child(90)::before {
  background: #67dff2;
}
.stripe:nth-child(90)::after {
  background: #03adf2;
}
.stripe:nth-child(91) {
  width: 8.1vw;
  height: 47%;
  background: #06f8ed;
  -webkit-animation-delay: 910ms;
          animation-delay: 910ms;
}
.stripe:nth-child(91)::before {
  background: #6affed;
}
.stripe:nth-child(91)::after {
  background: #06f8ed;
}
.stripe:nth-child(92) {
  width: 8.1vw;
  height: 64%;
  background: #0ecd9d;
  -webkit-animation-delay: 920ms;
          animation-delay: 920ms;
}
.stripe:nth-child(92)::before {
  background: #72ff9d;
}
.stripe:nth-child(92)::after {
  background: #0ecd9d;
}
.stripe:nth-child(93) {
  width: 3.1vw;
  height: 33%;
  background: #3ede9f;
  -webkit-animation-delay: 930ms;
          animation-delay: 930ms;
}
.stripe:nth-child(93)::before {
  background: #a2ff9f;
}
.stripe:nth-child(93)::after {
  background: #3ede9f;
}
.stripe:nth-child(94) {
  width: 7.1vw;
  height: 41%;
  background: #60c2fb;
  -webkit-animation-delay: 940ms;
          animation-delay: 940ms;
}
.stripe:nth-child(94)::before {
  background: #c4f4fb;
}
.stripe:nth-child(94)::after {
  background: #60c2fb;
}
.stripe:nth-child(95) {
  width: 18.1vw;
  height: 55%;
  background: #02dbaf;
  -webkit-animation-delay: 950ms;
          animation-delay: 950ms;
}
.stripe:nth-child(95)::before {
  background: #66ffaf;
}
.stripe:nth-child(95)::after {
  background: #02dbaf;
}
.stripe:nth-child(96) {
  width: 9.1vw;
  height: 44%;
  background: #02faef;
  -webkit-animation-delay: 960ms;
          animation-delay: 960ms;
}
.stripe:nth-child(96)::before {
  background: #66ffef;
}
.stripe:nth-child(96)::after {
  background: #02faef;
}
.stripe:nth-child(97) {
  width: 10.1vw;
  height: 48%;
  background: #31ae9d;
  -webkit-animation-delay: 970ms;
          animation-delay: 970ms;
}
.stripe:nth-child(97)::before {
  background: #95e09d;
}
.stripe:nth-child(97)::after {
  background: #31ae9d;
}
.stripe:nth-child(98) {
  width: 11.1vw;
  height: 73%;
  background: #28f6d9;
  -webkit-animation-delay: 980ms;
          animation-delay: 980ms;
}
.stripe:nth-child(98)::before {
  background: #8cffd9;
}
.stripe:nth-child(98)::after {
  background: #28f6d9;
}
.stripe:nth-child(99) {
  width: 6.1vw;
  height: 32%;
  background: #05a3b4;
  -webkit-animation-delay: 990ms;
          animation-delay: 990ms;
}
.stripe:nth-child(99)::before {
  background: #69d5b4;
}
.stripe:nth-child(99)::after {
  background: #05a3b4;
}
.stripe:nth-child(100) {
  width: 19.1vw;
  height: 41%;
  background: #58b6ba;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}
.stripe:nth-child(100)::before {
  background: #bce8ba;
}
.stripe:nth-child(100)::after {
  background: #58b6ba;
}
.stripe:nth-child(101) {
  width: 4.1vw;
  height: 67%;
  background: #61a9b4;
  -webkit-animation-delay: 1010ms;
          animation-delay: 1010ms;
}
.stripe:nth-child(101)::before {
  background: #c5dbb4;
}
.stripe:nth-child(101)::after {
  background: #61a9b4;
}
.stripe:nth-child(102) {
  width: 2.1vw;
  height: 46%;
  background: #62f9dc;
  -webkit-animation-delay: 1020ms;
          animation-delay: 1020ms;
}
.stripe:nth-child(102)::before {
  background: #c6ffdc;
}
.stripe:nth-child(102)::after {
  background: #62f9dc;
}
.stripe:nth-child(103) {
  width: 12.1vw;
  height: 57%;
  background: #1e9ca7;
  -webkit-animation-delay: 1030ms;
          animation-delay: 1030ms;
}
.stripe:nth-child(103)::before {
  background: #82cea7;
}
.stripe:nth-child(103)::after {
  background: #1e9ca7;
}
.stripe:nth-child(104) {
  width: 4.1vw;
  height: 40%;
  background: #55a1d7;
  -webkit-animation-delay: 1040ms;
          animation-delay: 1040ms;
}
.stripe:nth-child(104)::before {
  background: #b9d3d7;
}
.stripe:nth-child(104)::after {
  background: #55a1d7;
}
.stripe:nth-child(105) {
  width: 20.1vw;
  height: 80%;
  background: #56e9d2;
  -webkit-animation-delay: 1050ms;
          animation-delay: 1050ms;
}
.stripe:nth-child(105)::before {
  background: #baffd2;
}
.stripe:nth-child(105)::after {
  background: #56e9d2;
}
.stripe:nth-child(106) {
  width: 15.1vw;
  height: 79%;
  background: #1af9d3;
  -webkit-animation-delay: 1060ms;
          animation-delay: 1060ms;
}
.stripe:nth-child(106)::before {
  background: #7effd3;
}
.stripe:nth-child(106)::after {
  background: #1af9d3;
}
.stripe:nth-child(107) {
  width: 4.1vw;
  height: 58%;
  background: #12c5b0;
  -webkit-animation-delay: 1070ms;
          animation-delay: 1070ms;
}
.stripe:nth-child(107)::before {
  background: #76f7b0;
}
.stripe:nth-child(107)::after {
  background: #12c5b0;
}
.stripe:nth-child(108) {
  width: 12.1vw;
  height: 68%;
  background: #33cc9f;
  -webkit-animation-delay: 1080ms;
          animation-delay: 1080ms;
}
.stripe:nth-child(108)::before {
  background: #97fe9f;
}
.stripe:nth-child(108)::after {
  background: #33cc9f;
}
.stripe:nth-child(109) {
  width: 17.1vw;
  height: 36%;
  background: #21b2c4;
  -webkit-animation-delay: 1090ms;
          animation-delay: 1090ms;
}
.stripe:nth-child(109)::before {
  background: #85e4c4;
}
.stripe:nth-child(109)::after {
  background: #21b2c4;
}
.stripe:nth-child(110) {
  width: 2.1vw;
  height: 39%;
  background: #03b9b7;
  -webkit-animation-delay: 1100ms;
          animation-delay: 1100ms;
}
.stripe:nth-child(110)::before {
  background: #67ebb7;
}
.stripe:nth-child(110)::after {
  background: #03b9b7;
}
.stripe:nth-child(111) {
  width: 17.1vw;
  height: 75%;
  background: #55ddb7;
  -webkit-animation-delay: 1110ms;
          animation-delay: 1110ms;
}
.stripe:nth-child(111)::before {
  background: #b9ffb7;
}
.stripe:nth-child(111)::after {
  background: #55ddb7;
}
.stripe:nth-child(112) {
  width: 17.1vw;
  height: 50%;
  background: #1bc4c1;
  -webkit-animation-delay: 1120ms;
          animation-delay: 1120ms;
}
.stripe:nth-child(112)::before {
  background: #7ff6c1;
}
.stripe:nth-child(112)::after {
  background: #1bc4c1;
}
.stripe:nth-child(113) {
  width: 1.1vw;
  height: 40%;
  background: #5eb7e2;
  -webkit-animation-delay: 1130ms;
          animation-delay: 1130ms;
}
.stripe:nth-child(113)::before {
  background: #c2e9e2;
}
.stripe:nth-child(113)::after {
  background: #5eb7e2;
}
.stripe:nth-child(114) {
  width: 7.1vw;
  height: 57%;
  background: #17b7d1;
  -webkit-animation-delay: 1140ms;
   .........完整代码请登录后点击上方下载按钮下载查看