CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #e0474c;
}
.square {
border: 6px solid #2c3e50;
border-radius: 5px;
width: 80px;
height: 80px;
box-sizing: border-box;
background: #fff;
}
.top {
animation: fill 1.5s infinite;
}
.bottom {
margin: 50px 50px;
animation: fill 1.5s infinite reverse;
}
.wrapper {
width: 150px;
height: 150px;
transform-origin: 50% 50%;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
@keyframes fill {
0% {
opacity: 1;
transform: rotate(0deg) scale(1);
filter: blur(0);
}
50% {
opacity: 0.2;
transform: rotate(180deg) scale(0.5);
filter: blur(5px);
}
100% {
opacity: 1;
transform: rotate(0deg) scale(1);
filter: blur(0);
}
}
