CSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
margin: 0;
background: #22272f;
font-family: "HEAVITAS", "Helvetica Rounded", Arial, sans-serif;
}
.text {
color: #fff;
font-size: 100px;
font-weight: bold;
letter-spacing: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo > div {
width: 220px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
border-radius: 50%;
mix-blend-mode: multiply;
animation: 3s linear infinite;
}
div:nth-child(1) {
background-color: #54ffff;
animation-name: rotate-1;
}
div:nth-child(2) {
background-color: #ff73ff;
animation-name: rotate-3;
}
div:nth-child(3) {
background-color: #ffffa2;
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);
}
}
