Payament
Free Photos
WordPress Themes

Codepad Logo Animation v2

HTML
<div class="codepad-logo"> <div class="logo"></div> </div>
CSS
html, body { height: 100%; } body { position: relative; background-color: #0f222b; } *, *::before, *::after { box-sizing: border-box; } .codepad-logo, .codepad-logo::before, .codepad-logo::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .codepad-logo { width: 200px; height: 200px; margin: auto; color: #3498db; border-radius: 6px; box-shadow: inset 0 0 0 1px #3498db; transform: rotate(45deg); } .logo { background: url("https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0") no-repeat 50%/70%; width: 100%; height: 100%; transform: rotate(-45deg); } .codepad-logo::before, .codepad-logo::after { content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; border-radius: 6px; animation: clipIt 8s linear infinite; } .codepad-logo::before { animation-delay: -4s; } @keyframes clipIt { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } }
JAVASCRIPT
Expand for more options Login