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