原生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(0) translate3d(13%, -24%, 0) rotate(-69deg);
}

.box-wrap:nth-child(193) .box {
  background: #556aec;
  transform: scale(0) translate3d(28%, -107%, 0) rotate(41deg);
}

.box-wrap:nth-child(194) .box {
  background: #6878ee;
  transform: scale(0) translate3d(-65%, 103%, 0) rotate(-39deg);
}

.box-wrap:nth-child(195) .box {
  background: #5564ec;
  transform: scale(0) translate3d(-181%, -104%, 0) rotate(20deg);
}

.box-wrap:nth-child(196) .box {
  background: #1e2ee6;
  transform: scale(0) translate3d(158%, -7%, 0) rotate(11deg);
}

.box-wrap:nth-child(197) .box {
  background: #3540e9;
  transform: scale(0) translate3d(-142%, 144%, 0) rotate(57deg);
}

.box-wrap:nth-child(198) .box {
  background: #3a41e9;
  transform: scale(0) translate3d(180%, 85%, 0) rotate(26deg);
}

.box-wrap:nth-child(199) .box {
  background: #1e22e6;
  transform: scale(0) translate3d(-83%, 12%, 0) rotate(76deg);
}

.box-wrap:nth-child(200) .box {
  background: #5151ec;
  transform: scale(0) translate3d(-85%, 156%, 0) rotate(59deg);
}

.box-wrap:nth-child(201) .box {
  background: #6a68ee;
  transform: scale(0) translate3d(73%, -27%, 0) rotate(19deg);
}

.box-wrap:nth-child(202) .box {
  background: #5751ec;
  transform: scale(0) translate3d(135%, 177%, 0) rotate(-39deg);
}

.box-wrap:nth-child(203) .box {
  background: #5a51ec;
  transform: scale(0) translate3d(77%, -36%, 0) rotate(-5deg);
}

.box-wrap:nth-child(204) .box {
  background: #7b71ef;
  transform: scale(0) translate3d(152%, 10%, 0) rotate(-58deg);
}

.box-wrap:nth-child(205) .box {
  background: #3f2ce8;
  transform: scale(0) translate3d(-67%, -38%, 0) rotate(81deg);
}

.box-wrap:nth-child(206) .box {
  background: #8475f0;
  transform: scale(0) translate3d(5%, 105%, 0) rotate(-32deg);
}

.box-wrap:nth-child(207) .box {
  background: #5e47eb;
  transform: scale(0) translate3d(-70%, -20%, 0) rotate(-9deg);
}

.box-wrap:nth-child(208) .box {
  background: #6d55ec;
  transform: scale(0) translate3d(173%, -89%, 0) rotate(73deg);
}

.box-wrap:nth-child(209) .box {
  background: #421ee6;
  transform: scale(0) translate3d(-199%, 198%, 0) rotate(-51deg);
}

.box-wrap:nth-child(210) .box {
  background: #7355ec;
  transform: scale(0) translate3d(-110%, 122%, 0) rotate(-89deg);
}

.box-wrap:nth-child(211) .box {
  background: #8568ee;
  transform: scale(0) translate3d(122%, -141%, 0) rotate(-65deg);
}

.box-wrap:nth-child(212) .box {
  background: #9375f0;
  transform: scale(0) translate3d(74%, 110%, 0) rotate(-49deg);
}

.box-wrap:nth-child(213) .box {
  background: #521ee6;
  transform: scale(0) translate3d(144%, 199%, 0) rotate(89deg);
}

.box-wrap:nth-child(214) .box {
  background: #561ee6;
  transform: scale(0) translate3d(3%, -20%, 0) rotate(-52deg);
}

.box-wrap:nth-child(215) .box {
  background: #7847eb;
  transform: scale(0) translate3d(-123%, 167%, 0) rotate(6deg);
}

.box-wrap:nth-child(216) .box {
  background: #7c47eb;
  transform: scale(0) translate3d(107%, 163%, 0) rotate(3deg);
}

.box-wrap:nth-child(217) .box {
  background: #7f47eb;
  transform: scale(0) translate3d(85%, -48%, 0) rotate(85deg);
}

.box-wrap:nth-child(218) .box {
  background: #7635e9;
  transform: scale(0) translate3d(177%, 166%, 0) rotate(59deg);
}

.box-wrap:nth-child(219) .box {
  background: #8547eb;
  transform: scale(0) translate3d(-95%, 78%, 0) rotate(-30deg);
}

.box-wrap:nth-child(220) .box {
  background: #9a63ee;
  transform: scale(0) translate3d(-197%, 100%, 0) rotate(35deg);
}

.box-wrap:nth-child(221) .box {
  background: #9a5eed;
  transform: scale(0) translate3d(53%, 101%, 0) rotate(90deg);
}

.box-wrap:nth-child(222) .box {
  background: #a368ee;
  transform: scale(0) translate3d(14%, 73%, 0) rotate(-5deg);
}

.box-wrap:nth-child(223) .box {
  background: #7a1ee6;
  transform: scale(0) translate3d(194%, 38%, 0) rotate(-80deg);
}

.box-wrap:nth-child(224) .box {
  background: #9e55ec;
  transform: scale(0) translate3d(-112%, 36%, 0) rotate(-51deg);
}

.box-wrap:nth-child(225) .box {
  background: #ab68ee;
  transform: scale(0) translate3d(149%, -178%, 0) rotate(52deg);
}

.box-wrap:nth-child(226) .box {
  background: #ae68ee;
  transform: scale(0) translate3d(169%, -10%, 0) rotate(35deg);
}

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

.box-wrap:nth-child(228) .box {
  background: #ae5eed;
  transform: scale(0) translate3d(-116%, 181%, 0) rotate(10deg);
}

.box-wrap:nth-child(229) .box {
  background: #ad55ec;
  transform: scale(0) translate3d(-95%, 141%, 0) rotate(-65deg);
}

.box-wrap:nth-child(230) .box {
  background: #a743ea;
  transform: scale(0) translate3d(13%, 186%, 0) rotate(53deg);
}

.box-wrap:nth-child(231) .box {
  background: #a02ce8;
  transform: scale(0) translate3d(-125%, 87%, 0) rotate(89deg);
}

.box-wrap:nth-child(232) .box {
  background: #c271ef;
  transform: scale(0) translate3d(187%, 10%, 0) rotate(-81deg);
}

.box-wrap:nth-child(233) .box {
  background: #aa30e8;
  transform: scale(0) translate3d(49%, 143%, 0) rotate(41deg);
}

.box-wrap:nth-child(234) .box {
  background: #c975f0;
  transform: scale(0) translate3d(-39%, 100%, 0) rotate(-82deg);
}

.box-wrap:nth-child(235) .box {
  background: #b130e8;
  transform: scale(0) translate3d(109%, 24%, 0) rotate(74deg);
}

.box-wrap:nth-child(236) .box {
  background: #b127e7;
  transform: scale(0) translate3d(68%, -174%, 0) rotate(83deg);
}

.box-wrap:nth-child(237) .box {
  background: #d075f0;
  transform: scale(0) translate3d(46%, 52%, 0) rotate(60deg);
}

.box-wrap:nth-child(238) .box {
  background: #c54ceb;
  transform: scale(0) translate3d(-36%, 171%, 0) rotate(84deg);
}

.box-wrap:nth-child(239) .box {
  background: #c43eea;
  transform: scale(0) translate3d(200%, -113%, 0) rotate(-16deg);
}

.box-wrap:nth-child(240) .box {
  background: #c330e8;
  transform: scale(0) translate3d(128%, 142%, 0) rotate(-8deg);
}

.box-wrap:nth-child(241) .box {
  background: #c93ae9;
  transform: scale(0) translate3d(192%, -82%, 0) rotate(9deg);
}

.box-wrap:nth-child(242) .box {
  background: #d55aed;
  transform: scale(0) translate3d(68%, 107%, 0) rotate(48deg);
}

.box-wrap:nth-child(243) .box {
  background: #d755ec;
  transform: scale(0) translate3d(-146%, 196%, 0) rotate(-24deg);
}

.box-wrap:nth-child(244) .box {
  background: #d230e8;
  transform: scale(0) translate3d(-134%, -21%, 0) rotate(59deg);
}

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

.box-wrap:nth-child(246) .box {
  background: #d723e7;
  transform: scale(0) translate3d(-171%, -154%, 0) rotate(67deg);
}

.box-wrap:nth-child(247) .box {
  background: #e45aed;
  transform: scale(0) translate3d(-22%, 105%, 0) rotate(57deg);
}

.box-wrap:nth-child(248) .box {
  background: #e75eed;
  transform: scale(0) translate3d(90%, 40%, 0) rotate(60deg);
}

.box-wrap:nth-child(249) .box {
  background: #e743ea;
  transform: scale(0) translate3d(9%, -112%, 0) rotate(-18deg);
}

.box-wrap:nth-child(250) .box {
  background: #e82ce8;
  transform: scale(0) translate3d(176%, -74%, 0) rotate(74deg);
}

.box-wrap:nth-child(251) .box {
  background: #eb47e7;
  transform: scale(0) translate3d(134%, 124%, 0) rotate(52deg);
}

.box-wrap:nth-child(252) .box {
  background: #e935e1;
  transform: scale(0) translate3d(199%, 71%, 0) rotate(12deg);
}

.box-wrap:nth-child(253) .box {
  background: #e723db;
  transform: scale(0) translate3d(146%, 150%, 0) rotate(88deg);
}

.box-wrap:nth-child(254) .box {
  background: #ed5ee2;
  transform: scale(0) translate3d(-145%, 136%, 0) rotate(-19deg);
}

.box-wrap:nth-child(255) .box {
  background: #f075e3;
  transform: scale(0) translate3d(164%, -199%, 0) rotate(-37deg);
}

.box-wrap:nth-child(256) .box {
  background: #e727d0;
  transform: scale(0) translate3d(-50%, -183%, 0) rotate(39deg);
}

.box-wrap:nth-child(257) .box {
  background: #ea3ed2;
  transform: scale(0) translate3d(-119%, 83%, 0) rotate(8deg);
}

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

.box-wrap:nth-child(259) .box {
  background: #ef71d8;
  transform: scale(0) translate3d(-111%, -92%, 0) rotate(40deg);
}

.box-wrap:nth-child(260) .box {
  background: #eb4ccb;
  transform: scale(0) translate3d(-90%, -64%, 0) rotate(52deg);
}

.box-wrap:nth-child(261) .box {
  background: #ea43c5;
  transform: scale(0) translate3d(-125%, 9%, 0) rotate(45deg);
}

.box-wrap:nth-child(262) .box {
  background: #ed5ac9;
  transform: scale(0) translate3d(-79%, -51%, 0) rotate(-45deg);
}

.box-wrap:nth-child(263) .box {
  background: #ec51c3;
  transform: scale(0) translate3d(19%, 81%, 0) rotate(-56deg);
}

.box-wrap:nth-child(264) .box {
  background: #ea43bb;
  transform: scale(0) translate3d(63%, 165%, 0) rotate(22deg);
}

.box-wrap:nth-child(265) .box {
  background: #e61eaa;
  transform: scale(0) translate3d(-62%, 10%, 0) rotate(-55deg);
}

.box-wrap:nth-child(266) .box {
  background: #ef6cc5;
  transform: scale(0) translate3d(2%, 186%, 0) rotate(76deg);
}

.box-wrap:nth-child(267) .box {
  background: #e830aa;
  transform: scale(0) translate3d(-45%, 173%, 0) rotate(58deg);
}

.box-wrap:nth-child(268) .box {
  background: #e61e9e;
  transform: scale(0) translate3d(-92%, 19%, 0) rotate(-82deg);
}

.box-wrap:nth-child(269) .box {
  background: #ef6cbd;
  transform: scale(0) translate3d(-99%, -41%, 0) rotate(83deg);
}

.box-wrap:nth-child(270) .box {
  background: #e935a1;
  transform: scale(0) translate3d(-139%, 56%, 0) rotate(-5deg);
}

.box-wrap:nth-child(271) .box {
  background: #e9359d;
  transform: scale(0) translate3d(9%, -10%, 0) rotate(41deg);
}

.box-wrap:nth-child(272) .box {
  background: #e93a9c;
  transform: scale(0) translate3d(-185%, -81%, 0) rotate(-60deg);
}

.box-wrap:nth-child(273) .box {
  background: #e93a98;
  transform: scale(0) translate3d(-8%, 86%, 0) rotate(-18deg);
}

.box-wrap:nth-child(274) .box {
  background: #ef71b2;
  transform: scale(0) translate3d(123%, -165%, 0) rotate(-27deg);
}

.box-wrap:nth-child(275) .box {
  background: #e93a91;
  transform: scale(0) translate3d(-118%, 160%, 0) rotate(3deg);
}

.box-wrap:nth-child(276) .box {
  background: #ef71ad;
  transform: scale(0) translate3d(-110%, 26%, 0) rotate(31deg);
}

.box-wrap:nth-child(277) .box {
  background: #ea4390;
  transform: scale(0) translate3d(173%, -15%, 0) rotate(-72deg);
}

.box-wrap:nth-child(278) .box {
  background: #ef6ca6;
  transform: scale(0) translate3d(93%, -74%, 0) rotate(-14deg);
}

.box-wrap:nth-child(279) .box {
  background: #f075a9;
  transform: scale(0) translate3d(0%, -113%, 0) rotate(-18deg);
}

.box-wrap:nth-child(280) .box {
  background: #e93a80;
  transform: scale(0) translate3d(-50%, -23%, 0) rotate(84deg);
}

.box-wrap:nth-child(281) .box {
  background: #f075a4;
  transform: scale(0) translate3d(70%, -170%, 0) rotate(13deg);
}

.box-wrap:nth-child(282) .box {
  background: #eb4c85;
  transform: scale(0) translate3d(98%, 193%, 0) rotate(-47deg);
}

.box-wrap:nth-child(283) .box {
  background: #e72768;
  transform: scale(0) translate3d(100%, 29%, 0) rotate(-66deg);
}

.box-wrap:nth-child(284) .box {
  background: #ed5e8c;
  transform: scale(0) translate3d(189%, 11%, 0) rotate(-62deg);
}

.box-wrap:nth-child(285) .box {
  background: #eb4c7c;
  transform: scale(0) translate3d(-174%, -183%, 0) rotate(13deg);
}

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

.box-wrap:nth-child(287) .box {
  background: #f07595;
  transform: scale(0) translate3d(-8%, -144%, 0) rotate(-23deg);
}

.box-wrap:nth-child(288) .box {
  background: #ea3e67;
  transform: scale(0) translate3d(34%, 120%, 0) rotate(45deg);
}

.box-wrap:nth-child(289) .box {
  background: #e7234e;
  transform: scale(0) translate3d(-142%, 176%, 0) rotate(85deg);
}

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