eliev
eliev
Reputation Top 10%
eliev vischel
1 Snippet  (638th place)
Published
1 Channel
Created
3 Channels
Following
Jun 9, 2017
Last Visit
Jun 4, 2017
Registered
30 points  (923rd place)
Reputation
Junior Code Generator
Junior Publisher
Junior Trend Maker
Junior Popular Coder
Junior Autobiographer
Senior Autobiographer

Recent Snippets See all snippets by eliev

public by eliev created Jun 4, 2017  177  9  3  0

Logo - with animation full CSS

amazing way to present a logo in SVG
<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>            
;