Atom

Atom.markdown

Atom

A CSS atom with little electrons going around it.

A Pen by Bryan Jones on CodePen.

License.

index.html

<div id="wrapper">
  <div id="core">
  <div id="ring-outer-3" class="ring"></div>
  <div id="ring-outer-2" class="ring"></div>
  <div id="ring-outer" class="ring"></div>
  <div id="ring-middle" class="ring"></div>
  <div id="ring-inner" class="ring"></div>
  </div>
</div>

style.css

@import "compass";

/**
 * Declare keyframes.
 */
@include keyframes(rotateX) {
  0% {
    @include transform(rotate3d(1, 0, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(1, 0, 1, 360deg));
  }
}

@include keyframes(rotateY) {
  0% {
    @include transform(rotate3d(0, 1, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(0, 1, 1, 360deg));
  }
}

@include keyframes(rotateXY) {
  0% {
    @include transform(rotate3d(1, 1, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(1, 1, 1, 360deg));
  }
}

@include keyframes(rotateballX) {
  0% {
    @include transform(rotate3d(1, 0, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(1, 0, 1, -360deg));
  }
}

@include keyframes(rotateballY) {
  0% {
    @include transform(rotate3d(0, 1, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(0, 1, 1, -360deg));
  }
}

@include keyframes(rotateballXY) {
  0% {
    @include transform(rotate3d(1, 1, 1, 0deg));
  }
  100% {
    @include transform(rotate3d(1, 1, 1, -360deg));
  }
}
/**
 * Start Styling!
 */
* {
  @include box-sizing(border-box);
}

body {
  background-color: #aff298;
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
  
  @include filter-gradient(#aff298, #175b12, horizontal);
  @include background-image(radial-gradient(center, ellipse cover, #aff298 33%, #175b12 98%));
}

#wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  
  @include transform-style(preserve-3d);
}

.ring {
  background-color: transparent;
  border: 1px solid #500;
  position: absolute;
  
  @include border-radius(50%);
  
  &::after {
    background-color: #f00;
    border: 1px solid #000;
    content: "";
    height: 35px;
    height: 1.5vw;
    left: calc(50% - 0.75vw);
    top: -0.75vw;
    position: absolute;
    width: 35px;
    width: 1.5vw;
    
    @include border-radius(50%);
  }
  
  &::before {
    background-color: #f00;
    border: 1px solid #000;
    content: "";
    height: 35px;
    height: 1.5vw;
    left: calc(50% - 0.75vw);
    bottom: -0.75vw;
    position: absolute;
    width: 35px;
    width: 1.5vw;
    
    @include border-radius(50%);
  }
}

#ring-outer-3 {
  height: 200px;
  height: 36vw;
  left: calc(50% - 18vw);
  top: calc(50% - 18vw);
  width: 200px;
  width: 36vw;
  
  @include animation(rotateY 6s linear infinite);
  @include transform-style(preserve-3d);

  &::after {
    @include animation(rotateballY 6s linear infinite);
  }
  
  &::before {
    @include animation(rotateballY 6s linear infinite);
  }
}

#ring-outer-2 {
  height: 200px;
  height: 30vw;
  left: calc(50% - 15vw);
  top: calc(50% - 15vw);
  width: 200px;
  width: 30vw;
  
  @include animation(rotateXY 5s linear infinite);
  @include transform-style(preserve-3d);

  &::after {
    @include animation(rotateballXY 5s linear infinite);
  }
  
  &::before {
    @include animation(rotateballXY 5s linear infinite);
  }
}

#ring-outer {
  height: 200px;
  height: 24vw;
  left: calc(50% - 12vw);
  top: calc(50% - 12vw);
  width: 200px;
  width: 24vw;
  
  @include animation(rotateX 4s linear infinite);
  @include transform-style(preserve-3d);

  &::after {
    @include animation(rotateballX 4s linear infinite);
  }
  
  &::before {
    @include animation(rotateballX 4s linear infinite);
  }
}

#ring-middle {
  height: 150px;
  height: 18vw;
  left: calc(50% - 9vw);
  top: calc(50% - 9vw);
  width: 150px;
  width: 18vw;
  
  @include animation(rotateY 3.5s linear infinite);
  @include transform-style(preserve-3d);
  
  &::after {
    @include animation(rotateballY 3.5s linear infinite);
  }
  
  &::before {
    @include animation(rotateballY 3.5s linear infinite);
  }
}

#ring-inner {
  height: 100px;
  height: 12vw;
  left: calc(50% - 6vw);
  top: calc(50% - 6vw);
  width: 100px;
  width: 12vw;
  
  @include animation(rotateXY 3s linear infinite);
  @include transform-style(preserve-3d);
  
  &::after {
    @include animation(rotateballXY 3s linear infinite);
  }
  
  &::before {
    @include animation(rotateballXY 3s linear infinite);
  }
}

#core {
  background-color: #d99;
  height: 50px;
  height: 8vw;
  left: calc(50% - 4vw);
  position: absolute;
  top: calc(50% - 4vw);
  width: 50px;
  width: 8vw;
  
  @include background-image(radial-gradient(top left, ellipse cover, #f00 0%, #100 98%));
  @include border-radius(50%);
  @include filter-gradient(#f00, #000, horizontal);
  @include transform-style(preserve-3d);
}