console
<div id="box" class="blobs">
<div class="i">
</div>
<div class="i">
</div>
<div class="i">
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="17" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
position: fixed;
left: calc(50% - 25px);
top: calc(50% - 25px);
width: 50px;
height: 50px;
animation: loading 2s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
}
#box .i {
position: absolute;
left: 0;
top: 0;
display: block;
width: 50px;
height: 50px;
background: #03a9f4;
border-radius: 100%;
animation: loading2 2s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
}
#box .i:nth-child(1) {
transform: translate(0, -40px);
}
#box .i:nth-child(2) {
transform: translate(-40px, 40px);
}
#box .i:nth-child(3) {
transform: translate(40px, 40px);
}
.blobs {
filter: url("#goo");
}
@keyframes loading {
form {
transform: rotate(0deg);
}
to {
transform: rotate(720deg);
}
}
@keyframes loading2 {
0% {
background: #03a9f4;
}
50% {
background: #ffeb3b;
}
100% {
transform: translateX(0);
background: #8bc34a;
}
}