CSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
margin: 0;
background: #7BDFF2;
}
.logo {
width: 200px;
height: 200px;
position: relative;
}
.codepad {
position: absolute;
top: 60px;
width: 140px;
left: 30px;
}
.logo div {
position: absolute;
width: 160px;
height: 160px;
margin: 20px;
border-radius: 14%;
transform: rotate(45deg);
mix-blend-mode: multiply;
animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
}
.logo div:nth-child(1) {
background-color: #54ffff;
animation-name: rotate-1;
}
.logo div:nth-child(2) {
background-color: #ff73ff;
animation-name: rotate-2;
}
.logo div:nth-child(3) {
background-color: #ffffa2;
animation-name: rotate-3;
}
@keyframes rotate-1 {
to { transform: rotate(135deg); }
}
@keyframes rotate-2 {
to { transform: rotate(225deg); }
}
@keyframes rotate-3 {
to { transform: rotate(315deg); }
}
