A Pen by Eric.

A-Pen-by-Eric.markdown

A Pen by Eric

A Pen by Eric on CodePen.

License.

index.html

<div class="mod">
     <div class="bd">E</div>
     <div class="bd">R</div>
     <div class="bd">I</div>
     <div class="bd">C</div>
     <div class="bd">B</div>
     <div class="bd">Y</div>
     <div class="bd">Z</div>
</div>

style.scss

@import "compass";
$abs-rel:absolute relative;
$num:100%;
html,body{height:100%;}
.mod{
  width:$num;
  display:flex;
  justify-content:center;
  align-items:center;
  height:$num;
  position:nth($abs-rel,1);
  background:hsla(50%,30%,70%,1);
  font:40px "Hanalei";
  color:hsla(100%,100%,100%,1);
  .bd {
    background:red;
    border-radius:50%;
    width:150px;
    height:150px;
    line-height:150px;;
    text-align:center;
    position:nth($abs-rel,2);
    box-shadow:inset -20px -20px 20px #d52020;
    -webkit-animation:move 8.65s infinite ease-in-out;
    &:before,&:after{
       position:nth($abs-rel,1);
       content:"";
    }
    &:before{
       bottom:-20px;
       width:20px;
       height:20px;
       left:50%;
       margin-left:-10px;
       border-radius:50%;
       background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, red), to(rgb(255, 0, 0)));
    }
    &:after{
      width:1px;
      height:100px;
      bottom:-120px;
      left:50%;
      background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, green), to(rgb(255, 0, 0)));
    }
  }
  .bd:nth-child(1){
    -webkit-animation-delay: 1s; 
  }
  .bd:nth-child(2){
    -webkit-animation-delay: 1.5s;
  }  
  .bd:nth-child(3){
    -webkit-animation-delay: 1.9s; 
  }
  .bd:nth-child(4){
    -webkit-animation-delay: 2.8s; 
  }
  .bd:nth-child(5){
    -webkit-animation-delay: 3.9s; 
  }
  .bd:nth-child(6){
    -webkit-animation-delay: 4.8s; 
  }
  bd:nth-child(7){
    -webkit-animation-delay: 5.8s; 
  }
}

@-webkit-keyframes move{
  0%,100%{
     background:hsla(50%,50%,50%,1);
    -webkit-transform:translateY(10px) translateZ(10px) rotate(0);
  }
  50%{
    background:hsla(150%,20%,80%,1);
     -webkit-transform:translateY(-30px) translateZ(-30px) rotate(-10deg);
  }
}