@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;
}