CSS
html, body {
margin: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #333333;
}
.wrapper {
position: relative;
height: 220px;
width: 220px;
margin-right: 20px;
}
.layer-1, .layer-2, .layer-3 {
height: 220px;
width: 220px;
position: absolute;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
border-radius: 50%;
animation: 8s linear infinite;
}
.dribbble-logo {
position: absolute;
top: 20%;
left: 25%;
font-size: 140px;
color: #fff;
}
.layer-1 {
background-color: rgba(0, 182, 227, 0.9);
animation-name: rotate-1;
}
.layer-2 {
background-color: rgba(138, 186, 86, 0.9);
animation-name: rotate-3;
}
.layer-3 {
background-color: rgba(234, 76, 137, 0.9);
animation-name: rotate-2;
}
@keyframes rotate-1 {
0% {
transform-origin: 40%;
transform: rotate(0deg);
}
70%, 100% {
transform-origin: 60%;
transform: rotate(360deg);
}
}
@keyframes rotate-2 {
0% {
transform-origin: 40%;
transform: rotate(0deg);
}
80%, 100% {
transform-origin: 60%;
transform: rotate(360deg);
}
}
@keyframes rotate-3 {
0% {
transform-origin: 40%;
transform: rotate(0deg);
}
100% {
transform-origin: 60%;
transform: rotate(360deg);
}
}
