Codepad Animation v4

HTML
<div class="logo"> <div></div> <div></div> <div></div> <img class="codepad" src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0" alt="Codepad Logo"> </div>
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); } }
JAVASCRIPT
Expand for more options Login