eliev
eliev
Reputation Top 10%
eliev vischel
1 Snippet  (688th place)
Published
1 Channel
Created
3 Channels
Following
Jun 9, 2017
Last Visit
Jun 4, 2017
Registered
30 points  (1615th 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  986  13  4  1

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>            
;