原生js编写一个多彩格子滚动进入可视区域动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：原生js编写一个多彩格子滚动进入可视区域动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
html {
  padding-bottom: 100%;
}

body {
  background: #111;
  overflow-x: hidden;
}

.box-wrap {
  float: left;
  width: 14.2857142857%;
}

.box {
  opacity: 0;
  padding-bottom: 100%;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, transform;
}
.box-wrap.in-view:nth-child(n) .box {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0);
}

.box-wrap:nth-child(1) .box {
  background: #ea4643;
  transform: scale(0) translate3d(-29%, -194%, 0) rotate(-24deg);
}

.box-wrap:nth-child(2) .box {
  background: #e83830;
  transform: scale(0) translate3d(123%, -108%, 0) rotate(-74deg);
}

.box-wrap:nth-child(3) .box {
  background: #eb5147;
  transform: scale(0) translate3d(-178%, -46%, 0) rotate(-51deg);
}

.box-wrap:nth-child(4) .box {
  background: #ec5d51;
  transform: scale(0) translate3d(90%, -29%, 0) rotate(43deg);
}

.box-wrap:nth-child(5) .box {
  background: #ef796c;
  transform: scale(0) translate3d(-38%, 133%, 0) rotate(-48deg);
}

.box-wrap:nth-child(6) .box {
  background: #e84630;
  transform: scale(0) translate3d(-47%, -1%, 0) rotate(3deg);
}

.box-wrap:nth-child(7) .box {
  background: #f08675;
  transform: scale(0) translate3d(-183%, -181%, 0) rotate(57deg);
}

.box-wrap:nth-child(8) .box {
  background: #ea5a3e;
  transform: scale(0) translate3d(-44%, 157%, 0) rotate(74deg);
}

.box-wrap:nth-child(9) .box {
  background: #e74623;
  transform: scale(0) translate3d(-4%, 196%, 0) rotate(-76deg);
}

.box-wrap:nth-child(10) .box {
  background: #e95d3a;
  transform: scale(0) translate3d(-176%, -89%, 0) rotate(90deg);
}

.box-wrap:nth-child(11) .box {
  background: #ec7351;
  transform: scale(0) translate3d(73%, 8%, 0) rotate(-71deg);
}

.box-wrap:nth-child(12) .box {
  background: #eb724c;
  transform: scale(0) translate3d(113%, -151%, 0) rotate(-50deg);
}

.box-wrap:nth-child(13) .box {
  background: #eb754c;
  transform: scale(0) translate3d(47%, -82%, 0) rotate(-71deg);
}

.box-wrap:nth-child(14) .box {
  background: #f09875;
  transform: scale(0) translate3d(90%, 75%, 0) rotate(42deg);
}

.box-wrap:nth-child(15) .box {
  background: #e65a1e;
  transform: scale(0) translate3d(-17%, -174%, 0) rotate(-34deg);
}

.box-wrap:nth-child(16) .box {
  background: #e76527;
  transform: scale(0) translate3d(-163%, -5%, 0) rotate(-87deg);
}

.box-wrap:nth-child(17) .box {
  background: #ee9263;
  transform: scale(0) translate3d(146%, 140%, 0) rotate(-61deg);
}

.box-wrap:nth-child(18) .box {
  background: #ef9b6c;
  transform: scale(0) translate3d(-75%, 19%, 0) rotate(-6deg);
}

.box-wrap:nth-child(19) .box {
  background: #ef9e6c;
  transform: scale(0) translate3d(-51%, -149%, 0) rotate(-29deg);
}

.box-wrap:nth-child(20) .box {
  background: #e97d35;
  transform: scale(0) translate3d(-62%, 140%, 0) rotate(-29deg);
}

.box-wrap:nth-child(21) .box {
  background: #e77827;
  transform: scale(0) translate3d(-109%, -8%, 0) rotate(73deg);
}

.box-wrap:nth-child(22) .box {
  background: #eea368;
  transform: scale(0) translate3d(-34%, 81%, 0) rotate(53deg);
}

.box-wrap:nth-child(23) .box {
  background: #eea363;
  transform: scale(0) translate3d(194%, 173%, 0) rotate(23deg);
}

.box-wrap:nth-child(24) .box {
  background: #eea868;
  transform: scale(0) translate3d(-133%, 144%, 0) rotate(1deg);
}

.box-wrap:nth-child(25) .box {
  background: #e98f35;
  transform: scale(0) translate3d(-193%, -11%, 0) rotate(-78deg);
}

.box-wrap:nth-child(26) .box {
  background: #eda65a;
  transform: scale(0) translate3d(-86%, 51%, 0) rotate(-50deg);
}

.box-wrap:nth-child(27) .box {
  background: #f0b775;
  transform: scale(0) translate3d(15%, 85%, 0) rotate(-65deg);
}

.box-wrap:nth-child(28) .box {
  background: #efb56c;
  transform: scale(0) translate3d(124%, 71%, 0) rotate(-4deg);
}

.box-wrap:nth-child(29) .box {
  background: #eaa23e;
  transform: scale(0) translate3d(20%, -185%, 0) rotate(-17deg);
}

.box-wrap:nth-child(30) .box {
  background: #e79823;
  transform: scale(0) translate3d(155%, -173%, 0) rotate(-74deg);
}

.box-wrap:nth-child(31) .box {
  background: #e8a02c;
  transform: scale(0) translate3d(52%, 33%, 0) rotate(61deg);
}

.box-wrap:nth-child(32) .box {
  background: #eebc63;
  transform: scale(0) translate3d(7%, -63%, 0) rotate(70deg);
}

.box-wrap:nth-child(33) .box {
  background: #e7a627;
  transform: scale(0) translate3d(-91%, 15%, 0) rotate(-17deg);
}

.box-wrap:nth-child(34) .box {
  background: #e7a823;
  transform: scale(0) translate3d(184%, 193%, 0) rotate(-50deg);
}

.box-wrap:nth-child(35) .box {
  background: #ebbb4c;
  transform: scale(0) translate3d(-83%, -11%, 0) rotate(46deg);
}

.box-wrap:nth-child(36) .box {
  background: #eec763;
  transform: scale(0) translate3d(120%, -11%, 0) rotate(-30deg);
}

.box-wrap:nth-child(37) .box {
  background: #eabf43;
  transform: scale(0) translate3d(-63%, 173%, 0) rotate(12deg);
}

.box-wrap:nth-child(38) .box {
  background: #edcb5e;
  transform: scale(0) translate3d(129%, 147%, 0) rotate(-83deg);
}

.box-wrap:nth-child(39) .box {
  background: #eccb55;
  transform: scale(0) translate3d(43%, -60%, 0) rotate(-14deg);
}

.box-wrap:nth-child(40) .box {
  background: #e7c127;
  transform: scale(0) translate3d(-41%, 87%, 0) rotate(-68deg);
}

.box-wrap:nth-child(41) .box {
  background: #edd35e;
  transform: scale(0) translate3d(25%, -3%, 0) rotate(-14deg);
}

.box-wrap:nth-child(42) .box {
  background: #e7c723;
  transform: scale(0) translate3d(-76%, 169%, 0) rotate(45deg);
}

.box-wrap:nth-child(43) .box {
  background: #efdd71;
  transform: scale(0) translate3d(-112%, 82%, 0) rotate(-68deg);
}

.box-wrap:nth-child(44) .box {
  background: #ebd84c;
  transform: scale(0) translate3d(38%, 141%, 0) rotate(-53deg);
}

.box-wrap:nth-child(45) .box {
  background: #eee063;
  transform: scale(0) translate3d(82%, 57%, 0) rotate(17deg);
}

.box-wrap:nth-child(46) .box {
  background: #efe571;
  transform: scale(0) translate3d(176%, -172%, 0) rotate(75deg);
}

.box-wrap:nth-child(47) .box {
  background: #e7dc27;
  transform: scale(0) translate3d(116%, -197%, 0) rotate(-22deg);
}

.box-wrap:nth-child(48) .box {
  background: #e7df27;
  transform: scale(0) translate3d(-70%, -40%, 0) rotate(-38deg);
}

.box-wrap:nth-child(49) .box {
  background: #f0ed75;
  transform: scale(0) translate3d(19%, 73%, 0) rotate(25deg);
}

.box-wrap:nth-child(50) .box {
  background: #eeee68;
  transform: scale(0) translate3d(137%, -165%, 0) rotate(-40deg);
}

.box-wrap:nth-child(51) .box {
  background: #e6ea3e;
  transform: scale(0) translate3d(-15%, 136%, 0) rotate(82deg);
}

.box-wrap:nth-child(52) .box {
  background: #e1e935;
  transform: scale(0) translate3d(-188%, 144%, 0) rotate(-71deg);
}

.box-wrap:nth-child(53) .box {
  background: #e8ef71;
  transform: scale(0) translate3d(-42%, -86%, 0) rotate(69deg);
}

.box-wrap:nth-child(54) .box {
  background: #e4ef6c;
  transform: scale(0) translate3d(121%, 193%, 0) rotate(-16deg);
}

.box-wrap:nth-child(55) .box {
  background: #d9ea43;
  transform: scale(0) translate3d(175%, 44%, 0) rotate(38deg);
}

.box-wrap:nth-child(56) .box {
  background: #dbed5a;
  transform: scale(0) translate3d(-162%, -15%, 0) rotate(-41deg);
}

.box-wrap:nth-child(57) .box {
  background: #d6ec51;
  transform: scale(0) translate3d(-182%, -129%, 0) rotate(-47deg);
}

.box-wrap:nth-child(58) .box {
  background: #dcf075;
  transform: scale(0) translate3d(-167%, 50%, 0) rotate(-20deg);
}

.box-wrap:nth-child(59) .box {
  background: #ccea43;
  transform: scale(0) translate3d(-125%, 168%, 0) rotate(3deg);
}

.box-wrap:nth-child(60) .box {
  background: #d7f075;
  transform: scale(0) translate3d(-76%, -196%, 0) rotate(-61deg);
}

.box-wrap:nth-child(61) .box {
  background: #c7eb47;
  transform: scale(0) translate3d(-42%, -166%, 0) rotate(-35deg);
}

.box-wrap:nth-child(62) .box {
  background: #c0ea3e;
  transform: scale(0) translate3d(159%, -78%, 0) rotate(61deg);
}

.box-wrap:nth-child(63) .box {
  background: #bfea43;
  transform: scale(0) translate3d(11%, 120%, 0) rotate(40deg);
}

.box-wrap:nth-child(64) .box {
  background: #bbea43;
  transform: scale(0) translate3d(98%, -57%, 0) rotate(-41deg);
}

.box-wrap:nth-child(65) .box {
  background: #c4ee63;
  transform: scale(0) translate3d(-40%, 116%, 0) rotate(-48deg);
}

.box-wrap:nth-child(66) .box {
  background: #b6eb47;
  transform: scale(0) translate3d(-124%, -17%, 0) rotate(-9deg);
}

.box-wrap:nth-child(67) .box {
  background: #bbed5a;
  transform: scale(0) translate3d(184%, 165%, 0) rotate(5deg);
}

.box-wrap:nth-child(68) .box {
  background: #aeea43;
  transform: scale(0) translate3d(-60%, -50%, 0) rotate(-9deg);
}

.box-wrap:nth-child(69) .box {
  background: #a8ea3e;
  transform: scale(0) translate3d(113%, -101%, 0) rotate(-37deg);
}

.box-wrap:nth-child(70) .box {
  background: #a3e93a;
  transform: scale(0) translate3d(46%, 150%, 0) rotate(78deg);
}

.box-wrap:nth-child(71) .box {
  background: #99e82c;
  transform: scale(0) translate3d(137%, 4%, 0) rotate(-74deg);
}

.box-wrap:nth-child(72) .box {
  background: #a0ea43;
  transform: scale(0) translate3d(-109%, 187%, 0) rotate(-44deg);
}

.box-wrap:nth-child(73) .box {
  background: #9bea3e;
  transform: scale(0) translate3d(64%, 79%, 0) rotate(-56deg);
}

.box-wrap:nth-child(74) .box {
  background: #a6ed5a;
  transform: scale(0) translate3d(97%, -17%, 0) rotate(-8deg);
}

.box-wrap:nth-child(75) .box {
  background: #9eec51;
  transform: scale(0) translate3d(76%, 144%, 0) rotate(50deg);
}

.box-wrap:nth-child(76) .box {
  background: #a0ed5a;
  transform: scale(0) translate3d(91%, 82%, 0) rotate(75deg);
}

.box-wrap:nth-child(77) .box {
  background: #98ec51;
  transform: scale(0) translate3d(124%, 53%, 0) rotate(7deg);
}

.box-wrap:nth-child(78) .box {
  background: #7ce727;
  transform: scale(0) translate3d(-130%, 18%, 0) rotate(57deg);
}

.box-wrap:nth-child(79) .box {
  background: #75e723;
  transform: scale(0) translate3d(81%, 7%, 0) rotate(80deg);
}

.box-wrap:nth-child(80) .box {
  background: #95ed5a;
  transform: scale(0) translate3d(-110%, 6%, 0) rotate(-81deg);
}

.box-wrap:nth-child(81) .box {
  background: #76e830;
  transform: scale(0) translate3d(88%, 118%, 0) rotate(12deg);
}

.box-wrap:nth-child(82) .box {
  background: #69e723;
  transform: scale(0) translate3d(-160%, 67%, 0) rotate(-64deg);
}

.box-wrap:nth-child(83) .box {
  background: #6fe830;
  transform: scale(0) translate3d(145%, -34%, 0) rotate(-52deg);
}

.box-wrap:nth-child(84) .box {
  background: #65e727;
  transform: scale(0) translate3d(186%, 23%, 0) rotate(87deg);
}

.box-wrap:nth-child(85) .box {
  background: #5de723;
  transform: scale(0) translate3d(124%, 160%, 0) rotate(11deg);
}

.box-wrap:nth-child(86) .box {
  background: #5ae723;
  transform: scale(0) translate3d(-87%, 107%, 0) rotate(60deg);
}

.box-wrap:nth-child(87) .box {
  background: #67e93a;
  transform: scale(0) translate3d(-93%, 109%, 0) rotate(-1deg);
}

.box-wrap:nth-child(88) .box {
  background: #93f075;
  transform: scale(0) translate3d(-165%, -183%, 0) rotate(-34deg);
}

.box-wrap:nth-child(89) .box {
  background: #4ee723;
  transform: scale(0) translate3d(-8%, 146%, 0) rotate(23deg);
}

.box-wrap:nth-child(90) .box {
  background: #77ed5a;
  transform: scale(0) translate3d(-134%, 138%, 0) rotate(63deg);
}

.box-wrap:nth-child(91) .box {
  background: #69eb4c;
  transform: scale(0) translate3d(-160%, 184%, 0) rotate(82deg);
}

.box-wrap:nth-child(92) .box {
  background: #5aea3e;
  transform: scale(0) translate3d(-10%, 118%, 0) rotate(50deg);
}

.box-wrap:nth-child(93) .box {
  background: #42e727;
  transform: scale(0) translate3d(-73%, -128%, 0) rotate(75deg);
}

.box-wrap:nth-child(94) .box {
  background: #42e82c;
  transform: scale(0) translate3d(142%, -100%, 0) rotate(36deg);
}

.box-wrap:nth-child(95) .box {
  background: #75ee68;
  transform: scale(0) translate3d(-160%, 110%, 0) rotate(-66deg);
}

.box-wrap:nth-child(96) .box {
  background: #50ea43;
  transform: scale(0) translate3d(196%, -97%, 0) rotate(-72deg);
}

.box-wrap:nth-child(97) .box {
  background: #7df075;
  transform: scale(0) translate3d(-138%, -45%, 0) rotate(28deg);
}

.box-wrap:nth-child(98) .box {
  background: #38e830;
  transform: scale(0) translate3d(-126%, -71%, 0) rotate(41deg);
}

.box-wrap:nth-child(99) .box {
  background: #78f075;
  transform: scale(0) translate3d(-190%, -172%, 0) rotate(76deg);
}

.box-wrap:nth-child(100) .box {
  background: #6cef6c;
  transform: scale(0) translate3d(174%, 68%, 0) rotate(46deg);
}

.box-wrap:nth-child(101) .box {
  background: #3eea42;
  transform: scale(0) translate3d(-66%, 15%, 0) rotate(44deg);
}

.box-wrap:nth-child(102) .box {
  background: #27e72f;
  transform: scale(0) translate3d(37%, 197%, 0) rotate(72deg);
}

.box-wrap:nth-child(103) .box {
  background: #47eb51;
  transform: scale(0) translate3d(-83%, 69%, 0) rotate(20deg);
}

.box-wrap:nth-child(104) .box {
  background: #27e737;
  transform: scale(0) translate3d(186%, 137%, 0) rotate(-33deg);
}

.box-wrap:nth-child(105) .box {
  background: #23e736;
  transform: scale(0) translate3d(136%, -42%, 0) rotate(-15deg);
}

.box-wrap:nth-child(106) .box {
  background: #30e846;
  transform: scale(0) translate3d(-24%, 188%, 0) rotate(-69deg);
}

.box-wrap:nth-child(107) .box {
  background: #1ee63a;
  transform: scale(0) translate3d(88%, 185%, 0) rotate(49deg);
}

.box-wrap:nth-child(108) .box {
  background: #3eea5a;
  transform: scale(0) translate3d(-196%, 58%, 0) rotate(-78deg);
}

.box-wrap:nth-child(109) .box {
  background: #30e851;
  transform: scale(0) translate3d(150%, 5%, 0) rotate(-61deg);
}

.box-wrap:nth-child(110) .box {
  background: #63ee7f;
  transform: scale(0) translate3d(16%, 97%, 0) rotate(16deg);
}

.box-wrap:nth-child(111) .box {
  background: #63ee81;
  transform: scale(0) translate3d(-122%, 136%, 0) rotate(-22deg);
}

.box-wrap:nth-child(112) .box {
  background: #5aed7d;
  transform: scale(0) translate3d(-162%, 81%, 0) rotate(32deg);
}

.box-wrap:nth-child(113) .box {
  background: #43ea6e;
  transform: scale(0) translate3d(136%, 153%, 0) rotate(-36deg);
}

.box-wrap:nth-child(114) .box {
  background: #3ae96b;
  transform: scale(0) translate3d(-101%, 111%, 0) rotate(-38deg);
}

.box-wrap:nth-child(115) .box {
  background: #23e75d;
  transform: scale(0) translate3d(-180%, 192%, 0) rotate(-79deg);
}

.box-wrap:nth-child(116) .box {
  background: #6cef96;
  transform: scale(0) translate3d(15%, 130%, 0) rotate(4deg);
}

.box-wrap:nth-child(117) .box {
  background: #23e765;
  transform: scale(0) translate3d(74%, 194%, 0) rotate(-26deg);
}

.box-wrap:nth-child(118) .box {
  background: #27e76c;
  transform: scale(0) translate3d(134%, -169%, 0) rotate(-63deg);
}

.box-wrap:nth-child(119) .box {
  background: #47eb85;
  transform: scale(0) translate3d(-18%, 62%, 0) rotate(53deg);
}

.box-wrap:nth-child(120) .box {
  background: #27e774;
  transform: scale(0) translate3d(135%, 122%, 0) rotate(-10deg);
}

.box-wrap:nth-child(121) .box {
  background: #75f0a9;
  transform: scale(0) translate3d(96%, -176%, 0) rotate(-56deg);
}

.box-wrap:nth-child(122) .box {
  background: #35e984;
  transform: scale(0) translate3d(-63%, 141%, 0) rotate(15deg);
}

.box-wrap:nth-child(123) .box {
  background: #55ec9b;
  transform: scale(0) translate3d(157%, -173%, 0) rotate(48deg);
}

.box-wrap:nth-child(124) .box {
  background: #68eea8;
  transform: scale(0) translate3d(-5%, -11%, 0) rotate(51deg);
}

.box-wrap:nth-child(125) .box {
  background: #55eca1;
  transform: scale(0) translate3d(21%, 85%, 0) rotate(-52deg);
}

.box-wrap:nth-child(126) .box {
  background: #5aeda6;
  transform: scale(0) translate3d(-84%, 115%, 0) rotate(68deg);
}

.box-wrap:nth-child(127) .box {
  background: #68eeb0;
  transform: scale(0) translate3d(81%, -69%, 0) rotate(-37deg);
}

.box-wrap:nth-child(128) .box {
  background: #68eeb3;
  transform: scale(0) translate3d(-36%, 199%, 0) rotate(-13deg);
}

.box-wrap:nth-child(129) .box {
  background: #35e99d;
  transform: scale(0) translate3d(32%, 187%, 0) rotate(45deg);
}

.box-wrap:nth-child(130) .box {
  background: #2ce89c;
  transform: scale(0) translate3d(-124%, 6%, 0) rotate(39deg);
}

.box-wrap:nth-child(131) .box {
  background: #68eebb;
  transform: scale(0) translate3d(-37%, 88%, 0) rotate(6deg);
}

.box-wrap:nth-child(132) .box {
  background: #47ebb0;
  transform: scale(0) translate3d(-105%, 46%, 0) rotate(34deg);
}

.box-wrap:nth-child(133) .box {
  background: #75f0c6;
  transform: scale(0) translate3d(23%, 108%, 0) rotate(-80deg);
}

.box-wrap:nth-child(134) .box {
  background: #71efc7;
  transform: scale(0) translate3d(93%, 78%, 0) rotate(-16deg);
}

.box-wrap:nth-child(135) .box {
  background: #55ecbf;
  transform: scale(0) translate3d(-166%, 193%, 0) rotate(-35deg);
}

.box-wrap:nth-child(136) .box {
  background: #2ce8b3;
  transform: scale(0) translate3d(-42%, 139%, 0) rotate(-84deg);
}

.box-wrap:nth-child(137) .box {
  background: #27e7b5;
  transform: scale(0) translate3d(47%, 157%, 0) rotate(-80deg);
}

.box-wrap:nth-child(138) .box {
  background: #43eac2;
  transform: scale(0) translate3d(168%, -87%, 0) rotate(-51deg);
}

.box-wrap:nth-child(139) .box {
  background: #51ecca;
  transform: scale(0) translate3d(-101%, 168%, 0) rotate(68deg);
}

.box-wrap:nth-child(140) .box {
  background: #43eac9;
  transform: scale(0) translate3d(71%, 189%, 0) rotate(-20deg);
}

.box-wrap:nth-child(141) .box {
  background: #43eacc;
  transform: scale(0) translate3d(-127%, 56%, 0) rotate(84deg);
}

.box-wrap:nth-child(142) .box {
  background: #2ce8ca;
  transform: scale(0) translate3d(165%, -13%, 0) rotate(-89deg);
}

.box-wrap:nth-child(143) .box {
  background: #5aedd8;
  transform: scale(0) translate3d(-51%, 9%, 0) rotate(-69deg);
}

.box-wrap:nth-child(144) .box {
  background: #3ae9d4;
  transform: scale(0) translate3d(89%, 7%, 0) rotate(-29deg);
}

.box-wrap:nth-child(145) .box {
  background: #6cefe2;
  transform: scale(0) translate3d(51%, -199%, 0) rotate(43deg);
}

.box-wrap:nth-child(146) .box {
  background: #23e7d7;
  transform: scale(0) translate3d(198%, 176%, 0) rotate(34deg);
}

.box-wrap:nth-child(147) .box {
  background: #4cebe2;
  transform: scale(0) translate3d(-45%, 130%, 0) rotate(-59deg);
}

.box-wrap:nth-child(148) .box {
  background: #4cebe5;
  transform: scale(0) translate3d(-12%, -12%, 0) rotate(-7deg);
}

.box-wrap:nth-child(149) .box {
  background: #30e8e4;
  transform: scale(0) translate3d(149%, -187%, 0) rotate(77deg);
}

.box-wrap:nth-child(150) .box {
  background: #47ebeb;
  transform: scale(0) translate3d(53%, 57%, 0) rotate(28deg);
}

.box-wrap:nth-child(151) .box {
  background: #43e7ea;
  transform: scale(0) translate3d(190%, -173%, 0) rotate(-2deg);
}

.box-wrap:nth-child(152) .box {
  background: #5ae7ed;
  transform: scale(0) translate3d(28%, -32%, 0) rotate(31deg);
}

.box-wrap:nth-child(153) .box {
  background: #35dee9;
  transform: scale(0) translate3d(79%, -2%, 0) rotate(-79deg);
}

.box-wrap:nth-child(154) .box {
  background: #3edcea;
  transform: scale(0) translate3d(-154%, -22%, 0) rotate(53deg);
}

.box-wrap:nth-child(155) .box {
  background: #51dcec;
  transform: scale(0) translate3d(92%, -183%, 0) rotate(-6deg);
}

.box-wrap:nth-child(156) .box {
  background: #55daec;
  transform: scale(0) translate3d(24%, -79%, 0) rotate(-46deg);
}

.box-wrap:nth-child(157) .box {
  background: #51d6ec;
  transform: scale(0) translate3d(-35%, -116%, 0) rotate(-18deg);
}

.box-wrap:nth-child(158) .box {
  background: #6cdaef;
  transform: scale(0) translate3d(98%, 59%, 0) rotate(16deg);
}

.box-wrap:nth-child(159) .box {
  background: #27c5e7;
  transform: scale(0) translate3d(17%, -153%, 0) rotate(-42deg);
}

.box-wrap:nth-child(160) .box {
  background: #3ac6e9;
  transform: scale(0) translate3d(7%, -74%, 0) rotate(-17deg);
}

.box-wrap:nth-child(161) .box {
  background: #27bde7;
  transform: scale(0) translate3d(189%, 108%, 0) rotate(18deg);
}

.box-wrap:nth-child(162) .box {
  background: #5ecbed;
  transform: scale(0) translate3d(-33%, -39%, 0) rotate(-46deg);
}

.box-wrap:nth-child(163) .box {
  background: #68cbee;
  transform: scale(0) translate3d(-116%, -120%, 0) rotate(-37deg);
}

.box-wrap:nth-child(164) .box {
  background: #30b5e8;
  transform: scale(0) translate3d(65%, 183%, 0) rotate(88deg);
}

.box-wrap:nth-child(165) .box {
  background: #30b1e8;
  transform: scale(0) translate3d(76%, -60%, 0) rotate(26deg);
}

.box-wrap:nth-child(166) .box {
  background: #5ebfed;
  transform: scale(0) translate3d(-185%, -86%, 0) rotate(-55deg);
}

.box-wrap:nth-child(167) .box {
  background: #68c0ee;
  transform: scale(0) translate3d(120%, 173%, 0) rotate(-49deg);
}

.box-wrap:nth-child(168) .box {
  background: #4cb2eb;
  transform: scale(0) translate3d(-191%, -184%, 0) rotate(3deg);
}

.box-wrap:nth-child(169) .box {
  background: #5eb7ed;
  transform: scale(0) translate3d(72%, -103%, 0) rotate(-64deg);
}

.box-wrap:nth-child(170) .box {
  background: #35a1e9;
  transform: scale(0) translate3d(-86%, -97%, 0) rotate(-18deg);
}

.box-wrap:nth-child(171) .box {
  background: #2394e7;
  transform: scale(0) translate3d(-10%, -119%, 0) rotate(-57deg);
}

.box-wrap:nth-child(172) .box {
  background: #1e8ee6;
  transform: scale(0) translate3d(75%, 9%, 0) rotate(-63deg);
}

.box-wrap:nth-child(173) .box {
  background: #55a7ec;
  transform: scale(0) translate3d(94%, 93%, 0) rotate(82deg);
}

.box-wrap:nth-child(174) .box {
  background: #3e97ea;
  transform: scale(0) translate3d(-65%, -20%, 0) rotate(16deg);
}

.box-wrap:nth-child(175) .box {
  background: #4c9ceb;
  transform: scale(0) translate3d(-147%, 77%, 0) rotate(56deg);
}

.box-wrap:nth-child(176) .box {
  background: #358be9;
  transform: scale(0) translate3d(-51%, -88%, 0) rotate(33deg);
}

.box-wrap:nth-child(177) .box {
  background: #4c95eb;
  transform: scale(0) translate3d(-9%, -169%, 0) rotate(-36deg);
}

.box-wrap:nth-child(178) .box {
  background: #75abf0;
  transform: scale(0) translate3d(112%, 16%, 0) rotate(-60deg);
}

.box-wrap:nth-child(179) .box {
  background: #2c7be8;
  transform: scale(0) translate3d(200%, -189%, 0) rotate(-89deg);
}

.box-wrap:nth-child(180) .box {
  background: #75a6f0;
  transform: scale(0) translate3d(7%, 129%, 0) rotate(-51deg);
}

.box-wrap:nth-child(181) .box {
  background: #4c88eb;
  transform: scale(0) translate3d(119%, 97%, 0) rotate(25deg);
}

.box-wrap:nth-child(182) .box {
  background: #4782eb;
  transform: scale(0) translate3d(198%, 134%, 0) rotate(20deg);
}

.box-wrap:nth-child(183) .box {
  background: #6c99ef;
  transform: scale(0) translate3d(25%, 61%, 0) rotate(34deg);
}

.box-wrap:nth-child(184) .box {
  background: #5e8ced;
  transform: scale(0) translate3d(183%, 117%, 0) rotate(-22deg);
}

.box-wrap:nth-child(185) .box {
  background: #5582ec;
  transform: scale(0) translate3d(29%, -7%, 0) rotate(58deg);
}

.box-wrap:nth-child(186) .box {
  background: #5e86ed;
  transform: scale(0) translate3d(55%, -189%, 0) rotate(-3deg);
}

.box-wrap:nth-child(187) .box {
  background: #5e83ed;
  transform: scale(0) translate3d(181%, -92%, 0) rotate(63deg);
}

.box-wrap:nth-child(188) .box {
  background: #5176ec;
  transform: scale(0) translate3d(-30%, -11%, 0) rotate(45deg);
}

.box-wrap:nth-child(189) .box {
  background: #2c55e8;
  transform: scale(0) translate3d(59%, -107%, 0) rotate(-34deg);
}

.box-wrap:nth-child(190) .box {
  background: #3a5de9;
  transform: scale(0) translate3d(-70%, -107%, 0) rotate(-78deg);
}

.box-wrap:nth-child(191) .box {
  background: #5570ec;
  transform: scale(0) translate3d(45%, -111%, 0) rotate(-74deg);
}

.box-wrap:nth-child(192) .box {
  background: #6c81ef;
  transform: scale(.........完整代码请登录后点击上方下载按钮下载查看