正方体飞舞动态背景效果-html代码-BFW代码库

代码语言：html
所属分类：背景
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Blue Background</title>
<style>
  /* basic style */
html,
body {
  position: relative;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at left top, #72c7fe, #fafdff);
}

div {
  transform-style: preserve-3d;
}

.container {
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

/* cube style */
.cube_wrap:nth-of-type(1) {
  position: absolute;
  top: 57%;
  left: calc(50% + 10px);
  width: 10vw;
  height: 10vw;
  animation: cube 32s linear -28s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(1) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 35s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(1) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(87deg);
}
.cube_wrap:nth-of-type(1) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(1) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) {
  position: absolute;
  top: 38%;
  left: calc(50% + 20px);
  width: 10vw;
  height: 10vw;
  animation: cube 34s linear -26s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(2) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 39s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(2) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(22deg);
}
.cube_wrap:nth-of-type(2) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(2) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) {
  position: absolute;
  top: 37%;
  left: calc(50% + 30px);
  width: 10vw;
  height: 10vw;
  animation: cube 36s linear -24s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(3) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 36s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(3) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(125deg);
}
.cube_wrap:nth-of-type(3) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(3) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) {
  position: absolute;
  top: 32%;
  left: calc(50% + 40px);
  width: 10vw;
  height: 10vw;
  animation: cube 38s linear -22s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(4) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 31s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(4) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(169deg);
}
.cube_wrap:nth-of-type(4) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(4) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) {
  position: absolute;
  top: 23%;
  left: calc(50% + 50px);
  width: 10vw;
  height: 10vw;
  animation: cube 40s linear -20s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(5) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 26s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(5) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(150deg);
}
.cube_wrap:nth-of-type(5) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(5) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) {
  position: absolute;
  top: 63%;
  left: calc(50% + 60px);
  width: 10vw;
  height: 10vw;
  animation: cube 42s linear -18s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(6) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 38s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(6) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(103deg);
}
.cube_wrap:nth-of-type(6) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(6) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) {
  position: absolute;
  top: 52%;
  left: calc(50% + 70px);
  width: 10vw;
  height: 10vw;
  animation: cube 44s linear -16s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(7) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 29s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(7) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(151deg);
}
.cube_wrap:nth-of-type(7) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(7) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) {
  position: absolute;
  top: 47%;
  left: calc(50% + 80px);
  width: 10vw;
  height: 10vw;
  animation: cube 46s linear -14s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(8) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 40s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(8) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(83deg);
}
.cube_wrap:nth-of-type(8) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(8) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(9) {
  position: absolute;
  top: 53%;
  left: calc(50% + 90px);
  width: 6vw;
  height: 6vw;
  animation: cube 48s linear -12s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(9) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 23s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(9) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(142deg);
}
.cube_wrap:nth-of-type(9) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(9) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) {
  position: absolute;
  top: 35%;
  left: calc(50% + 100px);
  width: 6vw;
  height: 6vw;
  animation: cube 50s linear -10s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(10) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 37s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(10) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(145deg);
}
.cube_wrap:nth-of-type(10) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(10) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) {
  position: absolute;
  top: 36%;
  left: calc(50% + 110px);
  width: 6vw;
  height: 6vw;
  animation: cube 52s linear -8s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(11) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 25s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(11) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(22deg);
}
.cube_wrap:nth-of-type(11) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(11) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) {
  position: absolute;
  top: 42%;
  left: calc(50% + 120px);
  width: 6vw;
  height: 6vw;
  animation: cube 54s linear -6s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(12) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 25s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(12) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(41deg);
}
.cube_wrap:nth-of-type(12) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(12) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

/* square style */
.square:nth-of-type(1) {
  position: absolute;
  top: calc(20% + 158px);
  left: 91%;
  opacity: 0.3;
}

.square:nth-of-type(2) {
  position: absolute;
  top: calc(20% + 48px);
  left: 7%;
  opacity: 0.3;
}

.square:nth-of-type(3) {
  position: absolute;
  top: calc(20% + 273px);
  left: 84%;
  opacity: 0.3;
}

.square:nth-of-type(4) {
  position: absolute;
  top: calc(20% + 222px);
  left: 85%;
  opacity: 0.3;
}

.square:nth-of-type(5) {
  position: absolute;
  top: calc(20% + 241px);
  left: 23%;
  opacity: 0.3;
}

.square:nth-of-type(6) {
  position: absolute;
  top: calc(20% + 27px);
  left: 18%;
  opacity: 0.3;
}

.square:nth-of-type(7) {
  position: absolute;
  top: calc(20% + 268px);
  left: 43%;
  opacity: 0.3;
}

.square:nth-of-type(8) {
  position: absolute;
  top: calc(20% + 93px);
  left: 23%;
  opacity: 0.3;
}

.square:nth-of-type(9) {
  position: absolute;
  top: calc(20% + 288px);
  left: 88%;
  opacity: 0.3;
}

.square:nth-of-type(10) {
  position: absolute;
  top: calc(20% + 215px);
  left: 42%;
  opacity: 0.3;
}

.square:nth-of-type(11) {
  position: absolute;
  top: calc(20% + 78px);
  left: 71%;
  opacity: 0.3;
}

.square:nth-of-type(12) {
  position: absolute;
  top: calc(20% + 128px);
  left: 37%;
  opacity: 0.3;
}

.square:nth-of-type(13) {
  position: absolute;
  top: calc(20% + 129px);
  left: 2%;
  opacity: 0.3;
}

.square:nth-of-type(14) {
  position: absolute;
  top: calc(20% + 209px);
  left: 68%;
  opacity: 0.3;
}

.square:nth-of-type(15) {
  position: absolute;
  top: calc(20% + 243px);
  left: 56%;
  opacity: 0.3;
}

.square:nth-of-type(16) {
  position: absolute;
  top: calc(20% + 277px);
  left: 42%;
  opacity: 0.3;
}

.square:nth-of-type(17) {
  position: absolute;
  top: calc(20% + 120px);
  left: 74%;
  opacity: 0.3;
}

.square:nth-of-type(18) {
  position: absolute;
  top: calc(20% + 230px);
  left: 98%;
  opacity: 0.3;
}

.square:nth-of-type(19) {
  position: absolute;
  top: calc(20% + 239px);
  left: 54%;
  opacity: 0.3;
}

.square:nth-of-type(20) {
  position: absolute;
  top: calc(20% + 14px);
  left: 61%;
  opacity: 0.3;
}

.square:nth-of-type(21) {
  position: absolute;
  top: calc(20% + 290px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(22) {
  position: absolute;
  top: calc(20% + 300px);
  left: 44%;
  opacity: 0.3;
}

.square:nth-of-type(23) {
  position: absolute;
  top: calc(20% + 79px);
  left: 87%;
  opacity: 0.3;
}

.square:nth-of-type(24) {
  position: absolute;
  top: calc(20% + 183px);
  left: 87%;
  opacity: 0.3;
}

.square:nth-of-type(25) {
  position: absolute;
  top: calc(20% + 169px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(26) {
  position: absolute;
  top: calc(20% + 249px);
  left: 92%;
  opacity: 0.3;
}

.square:nth-of-type(27) {
  position: absolute;
  top: calc(20% + 49px);
  left: 39%;
  opacity: 0.3;
}

.square:nth-of-type(28) {
  position: absolute;
  top: calc(20% + 196px);
  left: 72%;
  opacity: 0.3;
}

.square:nth-of-type(29) {
  position: absolute;
  top: calc(20% + 153px);
  left: 28%;
  opacity: 0.3;
}

.square:nth-of-type(30) {
  position: absolute;
  top: calc(20% + 254px);
  left: 46%;
  opacity: 0.3;
}

.square:nth-of-type(31) {
  position: absolute;
  top: calc(20% + 252px);
  left: 35%;
  opacity: 0.3;
}

.square:nth-of-type(32) {
  position: absolute;
  top: calc(20% + 1px);
  left: 73%;
  opacity: 0.3;
}

.square:nth-of-type(33) {
  position: absolute;
  top: calc(20% + 153px);
  left: 37%;
  opacity: 0.3;
}

.square:nth-of-type(34) {
  position: absolute;
  top: calc(20% + 242px);
  left: 9%;
  opacity: 0.3;
}

.square:nth-of-type(35) {
  position: absolute;
  top: calc(20% + 202px);
  left: 59%;
  opacity: 0.3;
}

.square:nth-of-type(36) {
  position: absolute;
  top: calc(20% + 253px);
  left: 44%;
  opacity: 0.3;
}

.square:nth-of-type(37) {
  position: absolute;
  top: calc(20% + 122px);
  left: 65%;
  opacity: 0.3;
}

.square:nth-of-type(38) {
  position: absolute;
  top: calc(20% + 259px);
  left: 45%;
  opacity: 0.3;
}

.square:nth-of-type(39) {
  position: absolute;
  top: calc(20% + 12px);
  left: 9%;
  opacity: 0.3;
}

.square:nth-of-type(40) {
  position: absolute;
  top: calc(20% + 6px);
  left: 51%;
  opacity: 0.3;
}

.square:nth-of-type(41) {
  position: absolute;
  top: calc(20% + 104px);
  left: 4%;
  opacity: 0.3;
}

.square:nth-of-type(42) {
  position: absolute;
  top: calc(20% + 225px);
  left: 9%;
  opacity: 0.3;
}

.square:nth-of-type(43) {
  position: absolute;
  top: calc(20% + 104px);
  left: 88%;
  opacity: 0.3;
}

.square:nth-of-type(44) {
  position: absolute;
  top: calc(20% + 240px);
  left: 99%;
  opacity: 0.3;
}

.square:nth-of-type(45) {
  position: absolute;
  top: calc(20% + 44px);
  left: 96%;
  opacity: 0.3;
}

.square:nth-of-type(46) {
  position: absolute;
  top: calc(20% + 271px);
  left: 87%;
  opacity: 0.3;
}

.square:nth-of-type(47) {
  position: absolute;
  top: calc(20% + 277px);
  left: 60%;
  opacity: 0.3;
}

.square:nth-of-type(48) {
  position: absolute;
  top: calc(20% + 151px);
  left: 4%;
  opacity: 0.3;
}

.square:nth-of-type(49) {
  position: absolute;
  top: calc(20% + 224px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(50) {
  position: absolute;
  top: calc(20% + 276px);
  left: 71%;
  opacity: 0.3;
}

.square:nth-of-type(51) {
  position: absolute;
  top: calc(20% + 230px);
  left: 60%;
  opacity: 0.3;
}

.square:nth-of-type(52) {
  position: absolute;
  top: calc(20% + 262px);
  left: 77%;
  opacity: 0.3;
}

.square:nth-of-type(53) {
  position: absolute;
  top: calc(20% + 280px);
  left: 86%;
  opacity: 0.3;
}

.square:nth-of-type(54) {
  position: absolute;
  top: calc(20% + 32px);
  left: 56%;
  opacity: 0.3;
}

.square:nth-of-type(55) {
  position: absolute;
  top: calc(20% + 165px);
  left: 61%;
  opacity: 0.3;
}

.square:nth-of-type(56) {
  position: absolute;
  top: calc(20% + 16px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(57) {
  position: absolute;
  top: calc(20% + 140px);
  left: 11%;
  opacity: 0.3;
}

.square:nth-of-type(58) {
  position: absolute;
  top: calc(20% + 204px);
  left: 82%;
  opacity: 0.3;
}

.square:nth-of-type(59) {
  position: absolute;
  top: calc(20% + 21px);
  left: 35%;
  opacity: 0.3;
}

.square:nth-of-type(60) {
  position: absolute;
  top: calc(20% + 14px);
  left: 50%;
  opacity: 0.3;
}

.square:nth-of-type(61) {
  position: absolute;
  top: calc(20% + 142px);
  left: 43%;
  opacity: 0.3;
}

.square:nth-of-type(62) {
  position: absolute;
  top: calc(20% + 156px);
  left: 59%;
  opacity: 0.3;
}

.square:nth-of-type(63) {
  position: absolute;
  top: calc(20% + 244px);
  left: 4%;
  opacity: 0.3;
}

.square:nth-of-type(64) {
  position: absolute;
  top: calc(20% + 220px);
  left: 43%;
  opacity: 0.3;
}

.square:nth-of-type(65) {
  position: absolute;
  top: calc(20% + 251px);
  left: 5%;
  opacity: 0.3;
}

.square:nth-of-type(66) {
  position: absolute;
  top: calc(20% + 168px);
  left: 33%;
  opacity: 0.3;
}

.square:nth-of-type(67) {
  position: absolute;
  top: calc(20% + 136px);
  left: 73%;
  opacity: 0.3;
}

.square:nth-of-type(68) {
  position: absolute;
  top: calc(20% + 204px);
  left: 67%;
  opacity: 0.3;
}

.square:nth-of-type(69) {
  position: absolute;
  top: calc(20% + 45px);
  left: 90%;
  opacity: 0.3;
}

.square:nth-of-type(70) {
  position: absolute;
  top: calc(20% + 120px);
  left: 6%;
  opacity: 0.3;
}

.square:nth-of-type(71) {
  position: absolute;
  top: calc(20% + 155px);
  left: 68%;
  opacity: 0.3;
}

.square:nth-of-type(72) {
  position: absolute;
  top: calc(20% + 164px);
  left: 91%;
  opacity: 0.3;
}

.square:nth-of-type(73) {
  position: absolute;
  top: calc(20% + 180px);
  left: 49%;
  opacity: 0.3;
}

.square:nth-of-type(74) {
  position: absolute;
  top: calc(20% + 6px);
  left: 67%;
  opacity: 0.3;
}

.square:nth-of-type(75) {
  position: absolute;
  top: calc(20% + 60px);
  left: 74%;
  opacity: 0.3;
}

.square:nth-of-type(76) {
  position: absolute;
  top: calc(20% + 23px);
  left: 27%;
  opacity: 0.3;
}

.square:nth-of-type(77) {
  position: absolute;
  top: calc(20% + 101px);
  left: 77%;
  opacity: 0.3;
}

.square:nth-of-type(78) {
  position: absolute;
  top: calc(20% + 61px);
  left: 59%;
  opacity: 0.3;
}

.square:nth-of-type(79) {
  position: absolute;
  top: calc(20% + 225px);
  left: 96%;
  opacity: 0.3;
}

.square:nth-of-type(80) {
  position: absolute;
  top: calc(20% + 40px);
  left: 76%;
  opacity: 0.3;
}

.square:nth-of-type(81) {
  position: absolute;
  top: calc(20% + 100px);
  left: 53%;
  opacity: 0.3;
}

.square:nth-of-type(82) {
  position: absolute;
  top: calc(20% + 165px);
  left: 37%;
  opacity: 0.3;
}

.square:nth-of-type(83) {
  position: absolute;
  top: calc(20% + 163px);
  left: 62%;
  opacity: 0.3;
}

.square:nth-of-type(84) {
  position: absolute;
  top: calc(20% + 284px);
  left: 91%;
  opacity: 0.3;
}

.square:nth-of-type(85) {
  position: absolute;
  top: calc(20% + 160px);
  left: 71%;
  opacity: 0.3;
}

.square:nth-of-type(86) {
  position: absolute;
  top: calc(20% + 212px);
  left: 84%;
  opacity: 0.3;
}

.square:nth-of-type(87) {
  position: absolute;
  top: calc(20% + 92px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(88) {
  position: absolute;
  top: calc(20% + 26px);
  left: 21%;
  opacity: 0.3;
}

.square:nth-of-type(89) {
  position: absolute;
  top: calc(20% + 120px);
  left: 70%;
  opacity: 0.3;
}

.square:nth-of-type(90) {
  position: absolute;
  top: calc(20% + 168px);
  left: 80%;
  opacity: 0.3;
}

.square:nth-of-type(91) {
  position: absolute;
  top: calc(20% + 79px);
  left: 60%;
  opacity: 0.3;
}

.square:nth-of-type(92) {
  position: absolute;
  top: calc(20% + 58px);
  left: 55%;
  opacity: 0.3;
}

.square:nth-of-type(93) {
  position: absolute;
  top: calc(20% + 264px);
  left: 8%;
  opacity: 0.3;
}

.square:nth-of-type(94) {
  position: absolute;
  top: calc(20% + 110px);
  left: 77%;
  opacity: 0.3;
}

.square:nth-of-type(95) {
  position: absolute;
  top: calc(20% + 250px);
  left: 50%;
  opacity: 0.3;
}

.square:nth-of-type(96) {
  position: absolute;
  top: calc(20% + 108px);
  left: 10%;
  opacity: 0.3;
}

.square:nth-of-type(97) {
  position: absolute;
  top: calc(20% + 147px);
  left: 95%;
  opacity: 0.3;
}

.square:nth-of-type(98) {
  position: absolute;
  top: calc(20% + 140px);
  left: 44%;
  opacity: 0.3;
}

.square:nth-of-type(99) {
  position: absolute;
  top: calc(20% + 119px);
  left: 96%;
  opacity: 0.3;
}

.square:nth-of-type(100) {
  position: absolute;
  top: calc(20% + 177px);
  left: 16%;
  opacity: 0.3;
}

.square:nth-of-type(101) {
  position: absolute;
  top: calc(20% + 165px);
  left: 5%;
  opacity: 0.3;
}

.square:nth-of-type(102) {
  position: absolute;
  top: calc(20% + 26px);
  left: 72%;
  opacity: 0.3;
}

.square:nth-of-type(103) {
  position: absolute;
  top: calc(20% + 251px);
  left: 83%;
  opacity: 0.3;
}

.square:nth-of-type(104) {
  position: absolute;
  top: calc(20% + 13px);
  left: 11%;
  opacity: 0.3;
}

.square:nth-of-type(105) {
  position: absolute;
  top: calc(20% + 218px);
  left: 44%;
  opacity: 0.3;
}

.square:nth-of-type(106) {
  position: absolute;
  top: calc(20% + 144px);
  left: 11%;
  opacity: 0.3;
}

.square:nth-of-type(107) {
  position: absolute;
  top: calc(20% + 183px);
  left: 34%;
  opacity: 0.3;
}

.square:nth-of-type(108) {
  position: absolute;
  top: calc(20% + 33px);
  left: 13%;
  opacity: 0.3;
}

.square:nth-of-type(109) {
  position: absolute;
  top: calc(20% + 209px);
  left: 31%;
  opacity: 0.3;
}

.square:nth-of-type(110) {
  position: absolute;
  top: calc(20% + 208px);
  left: 4%;
  opacity: 0.3;
}

.square:nth-of-type(111) {
  position: absolute;
  top: calc(20% + 127px);
  left: 91%;
  opacity: 0.3;
}

.square:nth-of-type(112) {
  position: absolute;
  top: calc(20% + 295px);
  left: 17%;
  opacity: 0.3;
}

.square:nth-of-type(113) {
  position: absolute;
  top: calc(20% + 44px);
  left: 7%;
  opacity: 0.3;
}

.square:nth-of-type(114) {
  position: absolute;
  top: calc(20% + 265px);
  left: 33%;
  opacity: 0.3;
}

.square:nth-of-type(115) {
  position: absolute;
  top: calc(20% + 212px);
  left: 80%;
  opacity: 0.3;
}

.square:nth-of-type(116) {
  position: absolute;
  top: calc(20% + 220px);
  left: 25%;
  opacity: 0.3;
}

.square:nth-of-type(117) {
  position: absolute;
  top: calc(20% + 27px);
  left: 53%;
  opacity: 0.3;
}

.square:nth-of-type(118) {
  position: absolute;
  top: calc(20% + 278px);
  left: 83%;
  opacity: 0.3;
}

.square:nth-of-type(119) {
  position: absolute;
  top: calc(20% + 205px);
  left: 59%;
  opacity: 0.3;
}

.square:nth-of-type(120) {
  position: absolute;
  top: calc(20% + 158px);
  left: 15%;
  opacity: 0.3;
}

.square:nth-of-type(121) {
  position: absolute;
  top: calc(20% + 186px);
  left: 28%;
  opacity: 0.3;
}

.square:nth-of-type(122) {
  position: absolute;
  top: calc(20% + 100px);
  left: 57%;
  opacity: 0.3;
}

.square:nth-of-type(123) {
  position: absolute;
  top: calc(20% + 219px);
  left: 24%;
  opacity: 0.3;
}

.square:nth-of-type(124) {
  position: absolute;
  top: calc(20% + 261px);
  left: 4%;
  opacity: 0.3;
}

.square:nth-of-type(125) {
  position: absolute;
  top: calc(20% + 68px);
  left: 23%;
  opacity: 0.3;
}

.square:nth-of-type(126) {
  position: absolute;
  top: calc(20% + 300px);
  left: 22%;
  opacity: 0.3;
}

.square:nth-of-type(127) {
  position: absolute;
  top: calc(20% + 275px);
  left: 68%;
  opacity: 0.3;
}

.square:nth-of-type(128) {
  position: absolute;
  top: calc(20% + 73px);
  left: 6%;
  opacity: 0.3;
}

.square:nth-of-type(129) {
  position: absolute;
  top: calc(20% + 229px);
  left: 97%;
  opacity: 0.3;
}

.square:nth-of-type(130) {
  position: absolute;
  top: calc(20% + 160px);
  left: 57%;
  opacity: 0.3;
}

.square:nth-of-type(131) {
  position: absolute;
  top: calc(20% + 172px);
  left: 54%;
  opacity: 0.3;
}

.square:nth-of-type(132) {
  position: absolute;
  top: calc(20% + 117px);
  left: 32%;
  opacity: 0.3;
}

.square:nth-of-type(133) {
  position: absolute;
  top: calc(20% + 180px);
  left: 44%;
  opacity: 0.3;
}

.square:nth-of-type(134) {
  position: absolute;
  top: calc(20% + 77px);
  left: 2%;
  opacity: 0.3;
}

.square:nth-of-type(135) {
  position: absolute;
  top: calc(20% + 141px);
  left: 88%;
  opacity: 0.3;
}

.square:nth-of-type(136) {
  position: absolute;
  top: calc(20% + 3px);
  left: 93%;
  opacity: 0.3;
}

.square:nth-of-type(137) {
  position: absolute;
  top: calc(20% + 127px);
  left: 12%;
  opacity: 0.3;
}

.square:nth-of-type(138) {
  position: absolute;
  top: calc(20% + 104px);
  left: 29%;
  opacity: 0.3;
}

.square:nth-of-type(139) {
  position: absolute;
  top: calc(20% + 62px);
  left: 86%;
  opacity: 0.3;
}

.square:nth-of-type(140) {
  position: absolute;
  top: calc(20% + 256px);
  left: 35%;
  opacity: 0.3;
}

.square:nth-of-type(141) {
  position: absolute;
  top: calc(20% + 69px);
  left: 5%;
  opacity: 0.3;
}

.square:nth-of-type(142) {
  position: absolute;
  top: calc(20% + 80px);
  left: 50%;
  opacity: 0.3;
}

.square:nth-of-type(143) {
  position: absolute;
  top: calc(20% + 10px);
  left: 82%;
  opacity: 0.3;
}

.square:nth-of-type(144) {
  position: absolute;
  top: calc(20% + 269px);
  left: 72%;
  opacity: 0.3;
}

.square:nth-of-type(145) {
  position: absolute;
  top: calc(20% + 69px);
  left: 54%;
  opacity: 0.3;
}

.square:nth-of-type(146) {
  position: absolute;
  top: calc(20% + 29px);
  left: 72%;
  opacity: 0.3;
}

.square:nth-of-type(147) {
  position: absolute;
  top: calc(20% + 151px);
  left: 61%;
  opacity: 0.3;
}

.square:nth-of-type(148) {
  position: absolute;
  top: calc(20% + 95px);
  left: 95%;
  opacity: 0.3;
}

.square:nth-of-type(149) {
  position: absolute;
  top: calc(20% + 229px);
  left: 23%;
  opacity: 0.3;
}

.square:nth-of-type(150) {
  position: absolute;
  top: calc(20% + 246px);
  left: 56%;
  opacity: 0.3;
}

.square:nth-of-type(1) {
  width: 1.0333333333vw;
  height: 1.0333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -47s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(2) {
  width: 1.0666666667vw;
  height: 1.0666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 51s -17s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(3) {
  width: 1.1vw;
  height: 1.1vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 58s -6s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(4) {
  width: 1.1333333333vw;
  height: 1.1333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -39s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(5) {
  width: 1.1666666667vw;
  height: 1.1666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -4s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(6) {
  width: 1.2vw;
  height: 1.2vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -42s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(7) {
  width: 1.2333333333vw;
  height: 1.2333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 59s -12s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(8) {
  width: 1.2666666667vw;
  height: 1.2666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -32s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(9) {
  width: 1.3vw;
  height: 1.3vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -30s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(10) {
  width: 1.3333333333vw;
  height: 1.3333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -40s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(11) {
  width: 1.3666666667vw;
  height: 1.3666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 60s -6s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(12) {
  width: 1.4vw;
  height: 1.4vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 55s -23s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(13) {
  width: 1.4333333333vw;
  height: 1.4333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -21s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(14) {
  width: 1.4666666667vw;
  height: 1.4666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 60s -41s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(15) {
  width: 1.5vw;
  height: 1.5vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -22s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(16) {
  width: 1.5333333333vw;
  height: 1.5333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 51s -37s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(17) {
  width: 1.5666666667vw;
  height: 1.5666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 59s -26s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(18) {
  width: 1.6vw;
  height: 1.6vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -40s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(19) {
  width: 1.6333333333vw;
  height: 1.6333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 55s -42s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(20) {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 52s -14s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(21) {
  width: 1.7vw;
  height: 1.7vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 59s -8s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(22) {
  width: 1.7333333333vw;
  height: 1.7333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 55s -27s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(23) {
  width: 1.7666666667vw;
  height: 1.7666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 60s -50s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(24) {
  width: 1.8vw;
  height: 1.8vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 51s -43s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(25) {
  width: 1.8333333333vw;
  height: 1.8333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -37s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(26) {
  width: 1.8666666667vw;
  height: 1.8666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -10s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(27) {
  width: 1.9vw;
  height: 1.9vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -29s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(28) {
  width: 1.9333333333vw;
  height: 1.9333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 51s -30s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(29) {
  width: 1.9666666667vw;
  height: 1.9666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -8s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(30) {
  width: 2vw;
  height: 2vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -50s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(31) {
  width: 2.0333333333vw;
  height: 2.0333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -25s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(32) {
  width: 2.0666666667vw;
  height: 2.0666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -8s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(33) {
  width: 2.1vw;
  height: 2.1vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -41s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(34) {
  width: 2.1333333333vw;
  height: 2.1333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 58s -23s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(35) {
  width: 2.1666666667vw;
  height: 2.1666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 56s -4s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(36) {
  width: 2.2vw;
  height: 2.2vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 55s -22s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(37) {
  width: 2.2333333333vw;
  height: 2.2333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 52s -7s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(38) {
  width: 2.2666666667vw;
  height: 2.2666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -27s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(39) {
  width: 2.3vw;
  height: 2.3vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 59s -5s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(40) {
  width: 2.3333333333vw;
  height: 2.3333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 54s -44s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(41) {
  width: 2.3666666667vw;
  height: 2.3666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 52s -26s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(42) {
  width: 2.4vw;
  height: 2.4vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 55s -16s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(43) {
  width: 2.4333333333vw;
  height: 2.4333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 60s -3s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(44) {
  width: 2.4666666667vw;
  height: 2.4666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 52s -4s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(45) {
  width: 2.5vw;
  height: 2.5vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 51s -14s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(46) {
  width: 2.5333333333vw;
  height: 2.5333333333vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 57s -2s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(47) {
  width: 2.5666666667vw;
  height: 2.5666666667vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -20s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.square:nth-of-type(48) {
  width: 2.6vw;
  height: 2.6vw;
  background-color: #b0eaff;
  box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
  animation: square 53s -48s infinite;
}
@keyframes square {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);.........完整代码请登录后点击上方下载按钮下载查看