working on it ...

Filters

Explore Public Snippets

Sort by

Found 1 snippet

    public by eliev modified Jun 4, 2017  1240  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>            

    List Complete ( 1 snippet total )

    Cannot find what you were looking for?
    Ask the Snip2Code Community

    • Public Snippets
    • Channels Snippets