@keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } } .background { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #0016f9; overflow: hidden; } .background span { width: 20vmin; height: 20vmin; border-radius: 20vmin; backface-visibility: hidden; position: absolute; animation: move; animation-duration: 45; animation-timing-function: linear; animation-iteration-count: infinite; } .background span:nth-child(0) { color: #58ffff; top: 38%; left: 58%; animation-duration: 54s; animation-delay: -34s; transform-origin: 4vw 22vh; box-shadow: 40vmin 0 5.684908138745664vmin currentColor; } .background span:nth-child(1) { color: #58ffff; top: 63%; left: 44%; animation-duration: 34s; animation-delay: -6s; transform-origin: -6vw 15vh; box-shadow: -40vmin 0 5.595759959157035vmin currentColor; } .background span:nth-child(2) { color: #0000ff; top: 97%; left: 69%; animation-duration: 44s; animation-delay: -30s; transform-origin: -7vw 24vh; box-shadow: -40vmin 0 5.620830312937137vmin currentColor; } .background span:nth-child(3) { color: #0000ff; top: 3%; left: 80%; animation-duration: 16s; animation-delay: -11s; transform-origin: -19vw -4vh; box-shadow: -40vmin 0 5.301849844149264vmin currentColor; } .background span:nth-child(4) { color: #58ffff; top: 23%; left: 33%; animation-duration: 37s; animation-delay: -47s; transform-origin: 14vw 11vh; box-shadow: -40vmin 0 5.045059869065546vmin currentColor; } .background span:nth-child(5) { color: #58ffff; top: 12%; left: 88%; animation-duration: 10s; animation-delay: -17s; transform-origin: -19vw -9vh; box-shadow: -40vmin 0 5.151224270719177vmin currentColor; } .background span:nth-child(6) { color: #00b2fa; top: 96%; left: 84%; animation-duration: 32s; animation-delay: -11s; transform-origin: 3vw 8vh; box-shadow: 40vmin 0 5.041121484964207vmin currentColor; } .background span:nth-child(7) { color: #0000ff; top: 85%; left: 66%; animation-duration: 55s; animation-delay: -15s; transform-origin: -16vw 7vh; box-shadow: -40vmin 0 5.394181714225007vmin currentColor; } .background span:nth-child(8) { color: #58ffff; top: 8%; left: 46%; animation-duration: 44s; animation-delay: -25s; transform-origin: -15vw -6vh; box-shadow: 40vmin 0 5.107647813195104vmin currentColor; } .background span:nth-child(9) { color: #58ffff; top: 3%; left: 28%; animation-duration: 28s; animation-delay: -12s; transform-origin: -22vw -11vh; box-shadow: 40vmin 0 5.907064475041022vmin currentColor; } .background span:nth-child(10) { color: #58ffff; top: 33%; left: 93%; animation-duration: 8s; animation-delay: -9s; transform-origin: -20vw 13vh; box-shadow: -40vmin 0 5.735834534928815vmin currentColor; } .background span:nth-child(11) { color: #00b2fa; top: 86%; left: 60%; animation-duration: 34s; animation-delay: -19s; transform-origin: -18vw 6vh; box-shadow: -40vmin 0 5.189400922360039vmin currentColor; } .background span:nth-child(12) { color: #58ffff; top: 78%; left: 89%; animation-duration: 18s; animation-delay: -10s; transform-origin: 5vw -9vh; box-shadow: -40vmin 0 5.4565268504084vmin currentColor; } .background span:nth-child(13) { color: #00b2fa; top: 45%; left: 95%; animation-duration: 20s; animation-delay: -23s; transform-origin: 1vw 12vh; box-shadow: 40vmin 0 5.514887496866307vmin currentColor; } .background span:nth-child(14) { color: #00b2fa; top: 65%; left: 96%; animation-duration: 16s; animation-delay: -29s; transform-origin: -12vw -24vh; box-shadow: -40vmin 0 5.647168593448095vmin currentColor; } .background span:nth-child(15) { color: #00b2fa; top: 79%; left: 32%; animation-duration: 25s; animation-delay: -8s; transform-origin: 12vw -1vh; box-shadow: 40vmin 0 5.280137392626934vmin currentColor; } .background span:nth-child(16) { color: #00b2fa; top: 30%; left: 72%; animation-duration: 12s; animation-delay: -37s; transform-origin: -12vw 6vh; box-shadow: 40vmin 0 5.094774030917461vmin currentColor; } .background span:nth-child(17) { color: #58ffff; top: 95%; left: 66%; animation-duration: 54s; animation-delay: -21s; transform-origin: -19vw 11vh; box-shadow: 40vmin 0 5.386147271714576vmin currentColor; } .background span:nth-child(18) { color: #0000ff; top: 21%; left: 40%; animation-duration: 36s; animation-delay: -35s; transform-origin: 8vw 19vh; box-shadow: -40vmin 0 5.563639803968287vmin currentColor; } .background span:nth-child(19) { color: #58ffff; top: 5%; left: 2%; animation-duration: 44s; animation-delay: -34s; transform-origin: -11vw -15vh; box-shadow: 40vmin 0 5.067545343454949vmin currentColor; } .background span:nth-child(20) { color: #58ffff; top: 29%; left: 44%; animation-duration: 31s; animation-delay: -50s; transform-origin: -10vw 11vh; box-shadow: 40vmin 0 5.010383260470239vmin currentColor; } .background span:nth-child(21) { color: #00b2fa; top: 35%; left: 99%; animation-duration: 6s; animation-delay: -5s; transform-origin: 22vw -21vh; box-shadow: 40vmin 0 5.782152240986747vmin currentColor; } .background span:nth-child(22) { color: #0000ff; top: 43%; left: 52%; animation-duration: 23s; animation-delay: -28s; transform-origin: 9vw -2vh; box-shadow: 40vmin 0 5.228659523215346vmin currentColor; } .background span:nth-child(23) { color: #00b2fa; top: 79%; left: 39%; animation-duration: 16s; animation-delay: -27s; transform-origin: -22vw 23vh; box-shadow: -40vmin 0 5.524110245926581vmin currentColor; } .background span:nth-child(24) { color: #58ffff; top: 19%; left: 14%; animation-duration: 18s; animation-delay: -6s; transform-origin: 21vw 24vh; box-shadow: 40vmin 0 5.260854119392272vmin currentColor; } .background span:nth-child(25) { color: #00b2fa; top: 60%; left: 27%; animation-duration: 12s; animation-delay: -42s; transform-origin: 20vw -22vh; box-shadow: -40vmin 0 5.710083343364121vmin currentColor; }