by
30 6
0
4
228
11
Top 10% !
Popular
Specified
OpenSource
Created
Modified Jun 4, 2017

Published on:

No tags for this snippet yet.
Languagehtml
LanguageSVG

Logo - with animation full CSS

amazing way to present a logo in SVG
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1890194/Logo---with-animation-full-CSS?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<div class="codepad-logo"> <div class="logo"></div> </div> <style> 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://nucleos.ch/images/logo.svg") 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); } } </style>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus