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