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

Recent Snippets See all snippets by eliev

public by eliev created Jun 4, 2017  1219  13  5  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>            
;