<div class="stage">
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
.stage {
background-color: #fff;
filter: contrast(10);
padding: 2em;
width: 100%;
height: 10em;
}
.blob {
background-color: #000;
border-radius: 50%;
height: 4em;
position: absolute;
width: 4em;
&:nth-child(1) {
animation: wobble 3s ease infinite;
filter: blur(16px);
left: 2em;
top: 5.3em;
}
&:nth-child(2) {
animation: wobble 3.1s ease infinite;
filter: blur(15px);
left: 5em;
}
&:nth-child(3) {
animation: wobble 2.9s ease infinite;
filter: blur(12px);
left: 7.5em;
top: 5.5em;
}
&:nth-child(4) {
animation: wobble 3.15s ease infinite;
filter: blur(11px);
left: 10.7em;
top: 3em;
}
&:nth-child(5) {
animation: wobble 2.85s ease infinite;
filter: blur(18px);
left: 13.5em;
top: 5.9em;
}
}
@keyframes wobble {
50% { transform: translate(1em, .5em) }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.