div+css实现方块立方体漂浮旋转背景动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现方块立方体漂浮旋转背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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: 61%; 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 22s 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(64deg); } .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: 32%; 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 27s 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(141deg); } .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: 49%; 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 26s 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(142deg); } .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: 18%; 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 21s 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(48deg); } .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: 36%; 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 36s 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(51deg); } .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: 17%; 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 30s 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(115deg); } .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: 41%; 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 36s 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(1deg); } .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: 39%; 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 34s 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(112deg); } .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: 38%; 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 25s 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(95deg); } .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: 54%; 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 23s 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(51deg); } .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: 42%; 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 24s 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(14deg); } .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: 33%; 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 23s 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(168deg); } .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% + 99px); left: 95%; opacity: 0.3; } .square:nth-of-type(2) { position: absolute; top: calc(20% + 195px); left: 45%; opacity: 0.3; } .square:nth-of-type(3) { position: absolute; top: calc(20% + 131px); left: 53%; opacity: 0.3; } .square:nth-of-type(4) { position: absolute; top: calc(20% + 37px); left: 17%; opacity: 0.3; } .square:nth-of-type(5) { position: absolute; top: calc(20% + 25px); left: 48%; opacity: 0.3; } .square:nth-of-type(6) { position: absolute; top: calc(20% + 217px); left: 68%; opacity: 0.3; } .square:nth-of-type(7) { position: absolute; top: calc(20% + 263px); left: 64%; opacity: 0.3; } .square:nth-of-type(8) { position: absolute; top: calc(20% + 197px); left: 99%; opacity: 0.3; } .square:nth-of-type(9) { position: absolute; top: calc(20% + 103px); left: 2%; opacity: 0.3; } .square:nth-of-type(10) { position: absolute; top: calc(20% + 170px); left: 43%; opacity: 0.3; } .square:nth-of-type(11) { position: absolute; top: calc(20% + 257px); left: 35%; opacity: 0.3; } .square:nth-of-type(12) { position: absolute; top: calc(20% + 255px); left: 27%; opacity: 0.3; } .square:nth-of-type(13) { position: absolute; top: calc(20% + 219px); left: 39%; opacity: 0.3; } .square:nth-of-type(14) { position: absolute; top: calc(20% + 259px); left: 93%; opacity: 0.3; } .square:nth-of-type(15) { position: absolute; top: calc(20% + 201px); left: 92%; opacity: 0.3; } .square:nth-of-type(16) { position: absolute; top: calc(20% + 234px); left: 53%; opacity: 0.3; } .square:nth-of-type(17) { position: absolute; top: calc(20% + 260px); left: 7%; opacity: 0.3; } .square:nth-of-type(18) { position: absolute; top: calc(20% + 41px); left: 42%; opacity: 0.3; } .square:nth-of-type(19) { position: absolute; top: calc(20% + 172px); left: 87%; opacity: 0.3; } .square:nth-of-type(20) { position: absolute; top: calc(20% + 266px); left: 67%; opacity: 0.3; } .square:nth-of-type(21) { position: absolute; top: calc(20% + 9px); left: 19%; opacity: 0.3; } .square:nth-of-type(22) { position: absolute; top: calc(20% + 61px); left: 8%; opacity: 0.3; } .square:nth-of-type(23) { position: absolute; top: calc(20% + 80px); left: 73%; opacity: 0.3; } .square:nth-of-type(24) { position: absolute; top: calc(20% + 158px); left: 39%; opacity: 0.3; } .square:nth-of-type(25) { position: absolute; top: calc(20% + 274px); left: 30%; opacity: 0.3; } .square:nth-of-type(26) { position: absolute; top: calc(20% + 113px); left: 33%; opacity: 0.3; } .square:nth-of-type(27) { position: absolute; top: calc(20% + 292px); left: 71%; opacity: 0.3; } .square:nth-of-type(28) { position: absolute; top: calc(20% + 54px); left: 36%; opacity: 0.3; } .square:nth-of-type(29) { position: absolute; top: calc(20% + 225px); left: 20%; opacity: 0.3; } .square:nth-of-type(30) { position: absolute; top: calc(20% + 138px); left: 98%; opacity: 0.3; } .square:nth-of-type(31) { position: absolute; top: calc(20% + 98px); left: 77%; opacity: 0.3; } .square:nth-of-type(32) { position: absolute; top: calc(20% + 166px); left: 1%; opacity: 0.3; } .square:nth-of-type(33) { position: absolute; top: calc(20% + 14px); left: 66%; opacity: 0.3; } .square:nth-of-type(34) { position: absolute; top: calc(20% + 103px); left: 43%; opacity: 0.3; } .square:nth-of-type(35) { position: absolute; top: calc(20% + 178px); left: 6%; opacity: 0.3; } .square:nth-of-type(36) { position: absolute; top: calc(20% + 247px); left: 68%; opacity: 0.3; } .square:nth-of-type(37) { position: absolute; top: calc(20% + 182px); left: 9%; opacity: 0.3; } .square:nth-of-type(38) { position: absolute; top: calc(20% + 38px); left: 38%; opacity: 0.3; } .square:nth-of-type(39) { position: absolute; top: calc(20% + 71px); left: 53%; opacity: 0.3; } .square:nth-of-type(40) { position: absolute; top: calc(20% + 210px); left: 59%; opacity: 0.3; } .square:nth-of-type(41) { position: absolute; top: calc(20% + 281px); left: 66%; opacity: 0.3; } .square:nth-of-type(42) { position: absolute; top: calc(20% + 53px); left: 9%; opacity: 0.3; } .square:nth-of-type(43) { position: absolute; top: calc(20% + 90px); left: 84%; opacity: 0.3; } .square:nth-of-type(44) { position: absolute; top: calc(20% + 126px); left: 44%; opacity: 0.3; } .square:nth-of-type(45) { position: absolute; top: calc(20% + 51px); left: 96%; opacity: 0.3; } .square:nth-of-type(46) { position: absolute; top: calc(20% + 149px); left: 72%; opacity: 0.3; } .square:nth-of-type(47) { position: absolute; top: calc(20% + 249px); left: 86%; opacity: 0.3; } .square:nth-of-type(48) { position: absolute; top: calc(20% + 241px); left: 14%; opacity: 0.3; } .square:nth-of-type(49) { position: absolute; top: calc(20% + 91px); left: 97%; opacity: 0.3; } .square:nth-of-type(50) { position: absolute; top: calc(20% + 284px); left: 80%; opacity: 0.3; } .square:nth-of-type(51) { position: absolute; top: calc(20% + 30px); left: 16%; opacity: 0.3; } .square:nth-of-type(52) { position: absolute; top: calc(20% + 112px); left: 2%; opacity: 0.3; } .square:nth-of-type(53) { position: absolute; top: calc(20% + 189px); left: 26%; opacity: 0.3; } .square:nth-of-type(54) { position: absolute; top: calc(20% + 49px); left: 2%; opacity: 0.3; } .square:nth-of-type(55) { position: absolute; top: calc(20% + 200px); left: 24%; opacity: 0.3; } .square:nth-of-type(56) { position: absolute; top: calc(20% + 52px); left: 1%; opacity: 0.3; } .square:nth-of-type(57) { position: absolute; top: calc(20% + 152px); left: 49%; opacity: 0.3; } .square:nth-of-type(58) { position: absolute; top: calc(20% + 239px); left: 49%; opacity: 0.3; } .square:nth-of-type(59) { position: absolute; top: calc(20% + 280px); left: 53%; opacity: 0.3; } .square:nth-of-type(60) { position: absolute; top: calc(20% + 242px); left: 19%; opacity: 0.3; } .square:nth-of-type(61) { position: absolute; top: calc(20% + 245px); left: 31%; opacity: 0.3; } .square:nth-of-type(62) { position: absolute; top: calc(20% + 88px); left: 20%; opacity: 0.3; } .square:nth-of-type(63) { position: absolute; top: calc(20% + 183px); left: 76%; opacity: 0.3; } .square:nth-of-type(64) { position: absolute; top: calc(20% + 224px); left: 28%; opacity: 0.3; } .square:nth-of-type(65) { position: absolute; top: calc(20% + 260px); left: 71%; opacity: 0.3; } .square:nth-of-type(66) { position: absolute; top: calc(20% + 263px); left: 65%; opacity: 0.3; } .square:nth-of-type(67) { position: absolute; top: calc(20% + 292px); left: 43%; opacity: 0.3; } .square:nth-of-type(68) { position: absolute; top: calc(20% + 198px); left: 37%; opacity: 0.3; } .square:nth-of-type(69) { position: absolute; top: calc(20% + 33px); left: 60%; opacity: 0.3; } .square:nth-of-type(70) { position: absolute; top: calc(20% + 172px); left: 38%; opacity: 0.3; } .square:nth-of-type(71) { position: absolute; top: calc(20% + 199px); left: 13%; opacity: 0.3; } .square:nth-of-type(72) { position: absolute; top: calc(20% + 214px); left: 7%; opacity: 0.3; } .square:nth-of-type(73) { position: absolute; top: calc(20% + 12px); left: 50%; opacity: 0.3; } .square:nth-of-type(74) { position: absolute; top: calc(20% + 23px); left: 73%; opacity: 0.3; } .square:nth-of-type(75) { position: absolute; top: calc(20% + 19px); left: 14%; opacity: 0.3; } .square:nth-of-type(76) { position: absolute; top: calc(20% + 83px); left: 13%; opacity: 0.3; } .square:nth-of-type(77) { position: absolute; top: calc(20% + 271px); left: 23%; opacity: 0.3; } .square:nth-of-type(78) { position: absolute; top: calc(20% + 33px); left: 65%; opacity: 0.3; } .square:nth-of-type(79) { position: absolute; top: calc(20% + 252px); left: 66%; opacity: 0.3; } .square:nth-of-type(80) { position: absolute; top: calc(20% + 55px); left: 90%; opacity: 0.3; } .square:nth-of-type(81) { position: absolute; top: calc(20% + 197px); left: 51%; opacity: 0.3; } .square:nth-of-type(82) { position: absolute; top: calc(20% + 154px); left: 1%; opacity: 0.3; } .square:nth-of-type(83) { position: absolute; top: calc(20% + 26px); left: 94%; opacity: 0.3; } .square:nth-of-type(84) { position: absolute; top: calc(20% + 16px); left: 67%; opacity: 0.3; } .square:nth-of-type(85) { position: absolute; top: calc(20% + 106px); left: 29%; opacity: 0.3; } .square:nth-of-type(86) { position: absolute; top: calc(20% + 258px); left: 3%; opacity: 0.3; } .square:nth-of-type(87) { position: absolute; top: calc(20% + 170px); left: 49%; opacity: 0.3; } .square:nth-of-type(88) { position: absolute; top: calc(20% + 140px); left: 100%; opacity: 0.3; } .square:nth-of-type(89) { position: absolute; top: calc(20% + 132px); left: 7%; opacity: 0.3; } .square:nth-of-type(90) { position: absolute; top: calc(20% + 132px); left: 8%; opacity: 0.3; } .square:nth-of-type(91) { position: absolute; top: calc(20% + 249px); left: 35%; opacity: 0.3; } .square:nth-of-type(92) { position: absolute; top: calc(20% + 20px); left: 63%; opacity: 0.3; } .square:nth-of-type(93) { position: absolute; top: calc(20% + 263px); left: 11%; opacity: 0.3; } .square:nth-of-type(94) { position: absolute; top: calc(20% + 238px); left: 62%; opacity: 0.3; } .square:nth-of-type(95) { position: absolute; top: calc(20% + 167px); left: 21%; opacity: 0.3; } .square:nth-of-type(96) { position: absolute; top: calc(20% + 119px); left: 78%; opacity: 0.3; } .square:nth-of-type(97) { position: absolute; top: calc(20% + 115px); left: 1%; opacity: 0.3; } .square:nth-of-type(98) { position: absolute; top: calc(20% + 225px); left: 40%; opacity: 0.3; } .square:nth-of-type(99) { position: absolute; top: calc(20% + 127px); left: 91%; opacity: 0.3; } .square:nth-of-type(100) { position: absolute; top: calc(20% + 285px); left: 72%; opacity: 0.3; } .square:nth-of-type(101) { position: absolute; top: calc(20% + 101px); left: 100%; opacity: 0.3; } .square:nth-of-type(102) { position: absolute; top: calc(20% + 232px); left: 13%; opacity: 0.3; } .square:nth-of-type(103) { position: absolute; top: calc(20% + 72px); left: 3%; opacity: 0.3; } .square:nth-of-type(104) { position: absolute; top: calc(20% + 171px); left: 31%; opacity: 0.3; } .square:nth-of-type(105) { position: absolute; top: calc(20% + 54px); left: 69%; opacity: 0.3; } .square:nth-of-type(106) { position: absolute; top: calc(20% + 91px); left: 11%; opacity: 0.3; } .square:nth-of-type(107) { position: absolute; top: calc(20% + 50px); left: 88%; opacity: 0.3; } .square:nth-of-type(108) { position: absolute; top: calc(20% + 49px); left: 3%; opacity: 0.3; } .square:nth-of-type(109) { position: absolute; top: calc(20% + 156px); left: 28%; opacity: 0.3; } .square:nth-of-type(110) { position: absolute; top: calc(20% + 124px); left: 38%; opacity: 0.3; } .square:nth-of-type(111) { position: absolute; top: calc(20% + 55px); left: 78%; opacity: 0.3; } .square:nth-of-type(112) { position: absolute; top: calc(20% + 144px); left: 68%; opacity: 0.3; } .square:nth-of-type(113) { position: absolute; top: calc(20% + 31px); left: 37%; opacity: 0.3; } .square:nth-of-type(114) { position: absolute; top: calc(20% + 62px); left: 65%; opacity: 0.3; } .square:nth-of-type(115) { position: absolute; top: calc(20% + 249px); left: 70%; opacity: 0.3; } .square:nth-of-type(116) { position: absolute; top: calc(20% + 163px); left: 43%; opacity: 0.3; } .square:nth-of-type(117) { position: absolute; top: calc(20% + 154px); left: 82%; opacity: 0.3; } .square:nth-of-type(118) { position: absolute; top: calc(20% + 136px); left: 71%; opacity: 0.3; } .square:nth-of-type(119) { position: absolute; top: calc(20% + 231px); left: 30%; opacity: 0.3; } .square:nth-of-type(120) { position: absolute; top: calc(20% + 245px); left: 81%; opacity: 0.3; } .square:nth-of-type(121) { position: absolute; top: calc(20% + 1px); left: 65%; opacity: 0.3; } .square:nth-of-type(122) { position: absolute; top: calc(20% + 201px); left: 98%; opacity: 0.3; } .square:nth-of-type(123) { position: absolute; top: calc(20% + 235px); left: 11%; opacity: 0.3; } .square:nth-of-type(124) { position: absolute; top: calc(20% + 55px); left: 48%; opacity: 0.3; } .square:nth-of-type(125) { position: absolute; top: calc(20% + 116px); left: 73%; opacity: 0.3; } .square:nth-of-type(126) { position: absolute; top: calc(20% + 166px); left: 34%; opacity: 0.3; } .square:nth-of-type(127) { position: absolute; top: calc(20% + 164px); left: 18%; opacity: 0.3; } .square:nth-of-type(128) { position: absolute; top: calc(20% + 175px); left: 45%; opacity: 0.3; } .square:nth-of-type(129) { position: absolute; top: calc(20% + 28px); left: 64%; opacity: 0.3; } .square:nth-of-type(130) { position: absolute; top: calc(20% + 177px); left: 12%; opacity: 0.3; } .square:nth-of-type(131) { position: absolute; top: calc(20% + 277px); left: 39%; opacity: 0.3; } .square:nth-of-type(132) { position: absolute; top: calc(20% + 22px); left: 32%; opacity: 0.3; } .square:nth-of-type(133) { position: absolute; top: calc(20% + 172px); left: 71%; opacity: 0.3; } .square:nth-of-type(134) { position: absolute; top: calc(20% + 252px); left: 96%; opacity: 0.3; } .square:nth-of-type(135) { position: absolute; top: calc(20% + 169px); left: 41%; opacity: 0.3; } .square:nth-of-type(136) { position: absolute; top: calc(20% + 115px); left: 18%; opacity: 0.3; } .square:nth-of-type(137) { position: absolute; top: calc(20% + 102px); left: 94%; opacity: 0.3; } .square:nth-of-type(138) { position: absolute; top: calc(20% + 198px); left: 70%; opacity: 0.3; } .square:nth-of-type(139) { position: absolute; top: calc(20% + 59px); left: 48%; opacity: 0.3; } .square:nth-of-type(140) { position: absolute; top: calc(20% + 59px); left: 26%; opacity: 0.3; } .square:nth-of-type(141) { position: absolute; top: calc(20% + 177px); left: 39%; opacity: 0.3; } .square:nth-of-type(142) { position: absolute; top: calc(20% + 23px); left: 8%; opacity: 0.3; } .square:nth-of-type(143) { position: absolute; top: calc(20% + 272px); left: 1%; opacity: 0.3; } .square:nth-of-type(144) { position: absolute; top: calc(20% + 166px); left: 33%; opacity: 0.3; } .square:nth-of-type(145) { position: absolute; top: calc(20% + 46px); left: 63%; opacity: 0.3; } .square:nth-of-type(146) { position: absolute; top: calc(20% + 83px); left: 33%; opacity: 0.3; } .square:nth-of-type(147) { position: absolute; top: calc(20% + 83px); left: 19%; opacity: 0.3; } .square:nth-of-type(148) { position: absolute; top: calc(20% + 119px); left: 11%; opacity: 0.3; } .square:nth-of-type(149) { position: absolute; top: calc(20% + 91px); left: 69%; opacity: 0.3; } .square:nth-of-type(150) { position: absolute; top: calc(20% + 255px); left: 78%; 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 60s -32s 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 60s -34s 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 54s -20s 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 -40s 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 -43s 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 59s -48s 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 58s -15s 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 52s -16s 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 60s -6s 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 60s -1s 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 53s -24s 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 52s -46s 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 -38s 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 57s -46s 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 54s -24s 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 -10s 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 52s -38s 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 56s -45s 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 56s -20s 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 53s -49s 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 -38s 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 56s -38s 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 57s -42s 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 56s -3s 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 52s -45s 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 59s -29s 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 52s -16s 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 54s -12s 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 56s -4s 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 -41s 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 52s -36s 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 53s -25s 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 55s -14s 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 59s -17s 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 -9s 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 59s -39s 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 58s -23s 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 56s -36s 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 52s -41s 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 51s -45s 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 55s -7s 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 58s -22s 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 56s -5s 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 55s -36s 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 59s -15s 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 56s -17s 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 60s -9s 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 52s -11s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(49) { width: 2.6333333333vw; height: 2.6333333333vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 59s -22s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(50) { width: 2.6666666667vw; height: 2.6666666667vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 54s -46s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(51) { width: 2.7vw; height: 2.7vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 53s -28s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(52) { width: 2.7333333333vw; height: 2.7333333333vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 58s -39s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(53) { width: 2.7666666667vw; height: 2.7666666667vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 52s -43s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(54) { width: 2.8vw; height: 2.8vw; background-color: #b0eaff; box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff; animation: square 52s -41s infinite; } @keyframes square { 0% { transform: translateX(-120vw); } 100% { transform: translateX(120vw); } } .square:nth-of-type(55) { width: 2.8333333333vw; height: 2.8333333333vw; background-color: #b0e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0