kyomoto // background

<style>
.background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}

.background span {
width: 40vmin;
height: 40vmin;
border-radius: 20vmin;
backface-visibility: hidden;
position: absolute;
animation-name: move;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background span:nth-child(1) {
color: #FAE0E8;
top: 39%;
left: 27%;
animation-duration: 12.8s;
animation-delay: -13.7s;
transform-origin: 6vw -9vh;
box-shadow: -40vmin 0 5.009616418vmin currentColor;
}
.background span:nth-child(2) {
color: #E8E1EE;
top: 93%;
left: 75%;
animation-duration: 11.2s;
animation-delay: -1.6s;
transform-origin: -16vw 7vh;
box-shadow: -40vmin 0 7.4277373741vmin currentColor;
}
.background span:nth-child(3) {
color: #FFFFFF;
top: 79%;
left: 74%;
animation-duration: 11.1s;
animation-delay: -1.4s;
transform-origin: -14vw 13vh;
box-shadow: 40vmin 0 10.5566948409vmin currentColor;
}
.background span:nth-child(4) {
color: #FAE0E8;
top: 27%;
left: 65%;
animation-duration: 10.5s;
animation-delay: -10.3s;
transform-origin: 15vw -5vh;
box-shadow: 40vmin 0 14.5287386636vmin currentColor;
}
.background span:nth-child(5) {
color: #E8E1EE;
top: 40%;
left: 87%;
animation-duration: 11.7s;
animation-delay: -12.5s;
transform-origin: -6vw 12vh;
box-shadow: 40vmin 0 14.0437486596vmin currentColor;
}
.background span:nth-child(6) {
color: #FFFFFF;
top: 12%;
left: 27%;
animation-duration: 11.7s;
animation-delay: -3.6s;
transform-origin: 8vw -17vh;
box-shadow: -40vmin 0 8.8226591104vmin currentColor;
}
.background span:nth-child(7) {
color: #FAE0E8;
top: 30%;
left: 24%;
animation-duration: 10.3s;
animation-delay: -15.7s;
transform-origin: 0vw -19vh;
box-shadow: -40vmin 0 6.8918709005vmin currentColor;
}
.background span:nth-child(8) {
color: #E8E1EE;
top: 48%;
left: 48%;
animation-duration: 10.2s;
animation-delay: -10.4s;
transform-origin: 10vw -24vh;
box-shadow: -40vmin 0 7.5512122265vmin currentColor;
}
.background span:nth-child(9) {
color: #FFFFFF;
top: 73%;
left: 28%;
animation-duration: 10.3s;
animation-delay: -10.3s;
transform-origin: -13vw 18vh;
box-shadow: -40vmin 0 14.6182025673vmin currentColor;
}
.background span:nth-child(10) {
color: #FAE0E8;
top: 2%;
left: 6%;
animation-duration: 16s;
animation-delay: -7.3s;
transform-origin: -6vw -12vh;
box-shadow: -40vmin 0 13.7729871267vmin currentColor;
}

@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
</style>

<div class="background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>