Animated Atom Logo

animated-atom-logo.markdown

Animated Atom Logo

A Pen by Hugo Darby-Brown on CodePen.

License.

index.html

<section>
  <div class="center"></div>
  
  <article class="ring1">
    <div></div>
  </article>
  <article class="ring2">
    <div></div>
  </article>
  <article class="ring3">
    <div></div>
  </article>
</section>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

$electrons: #2ecc71, #3498db, #e74c3c;

html {
  background-color: rgb(62,59,102);
  @include background-image(radial-gradient(center, ellipse cover,  rgba(62,59,102,1) 0%,rgba(0,0,0,1) 100%));
  height: 100%;
  overflow: hidden;
} 
section {
  cursor: pointer; 
}

[class*="ring"] {
  animation: glow 3s linear infinite;
  border-radius: 50%;
  border: 0.6em solid rgba(white,0.8);
  border-top: 1.5em solid rgba(white,0.8);
  border-bottom: 1.5em solid rgba(white,0.8); 
  box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); 
  height: 30em;
  @extend %center;
  transition: 1s transform ease-in-out;
  width: 30em; 
  
  div {
    animation: rotate 2s linear infinite;
    border-radius: 50%;
    height: 100%;
    position: relative;
    width: 100%;
    
    &:after {
      animation: squash 2s linear infinite; 
      @include transform(scale(3,1));
      border-radius: 50%;
      content: '';
      left: 50%;
      height: 3em;
      margin-left: -1.5em;
      opacity: 0.8;
      position: absolute;
      top: -1.2em;
      width: 3em;
    }
  }
  
}



@for $i from 1 through 3 {
  .ring#{$i} {
    transform: rotate($i * 120deg) scale(0.333,1); 
    
    div:after {
      background: nth($electrons, $i); 
      box-shadow: 0 0 20px  nth($electrons, $i);
    }
    
    section:hover & {
      border: 0.6em solid rgba(white,0.8);
      transform: rotate(0deg) scale($i/3,$i/3) perspective(600px) rotateX(60deg);
      div:after {
        animation: none;
        top: -1.6em;
        transform: scale(1,1);
      }
    }
  }
}

.center {  
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(white,0.3);
  height: 3em;
  box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); 
  @extend %center;
  transition: 1s transform ease-in-out;
  width: 3em;
  
  section:hover & {
   transform: translate(0, 0.5em); 
  }
}


@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(white,0.2), 0 0 10px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); 
  }
  50% {
    box-shadow: 0 0 10px rgba(white,0.2), 0 0 30px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); 
  }
}


@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  } 
}

@keyframes squash {
  0%,50%, 100%{
    transform: scale(1,1);
    top: -2.6em; 
  }
  25%, 75%{
    transform: scale(2,1);
    top: -1.2em;
  } 
}

styles

<link href="https://codepen.io/hugo/pen/f179d14c2abbc7184a84c52bfc753876" rel="stylesheet" />