A Pen by Ali BARIN.

Google+-Jingle.markdown

Google+ Jingle

A Pen by Ali BARIN on CodePen.

License.

index.html

<div id="first-jingle" class="jingle">
  <div class="head">
    <div class="shine"></div>
  
    <div id="eye-1" class="eye"></div>
    <div id="eye-2" class="eye"></div>
  
    <div class="mouth"></div>
  </div>

  <div class="bell"></div>
</div>

style.less

#first-jingle{ left: 100px; top: 100px; }

@grayDarker:        #999999;
@gray:              #adadad;
@grayLighter:       #C5C5C5;

.jingle{
  animation: belling 3s infinite;
  height: 50px;
  position: relative;
  transform-origin: 50% -7px;
  user-select: none;
  width: 62px;
  
  .head{
    background: @grayLighter;
    border-radius: 50px 50px 0 0;
    height: 50px;
    position: relative;
    z-index: 2;
    width: 62px;
  }
  
  &:before{
    border: 2px solid @grayLighter;
    border-radius: 50px;
    content: ' ';
    display: block;
    height: 10px;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    top: -13px;
    width: 10px;
  }
  
  &:after{
    background: @grayLighter;
    border-radius: 10px;
    bottom: -12px;
    content: ' ';
    display: block;
    height: 12px;
    left: -5px;
    position: absolute;
    z-index: 2;
    width: 72px;
  }
  
  .shine{
    border: 2px solid #d6d6d6;
    border-radius: 30px;
    clip: rect(0, 30px, 13px, 15px);
    height: 26px;
    position: absolute;
    right: 7px;
    top: 6px;
    width: 26px; 
  }
  
  .eye{
    background: @grayDarker;
    border-radius: 10px;
    height: 5px;
    position: absolute;
    top: 30px;
    width: 5px;
    
    &#eye-1{ left: 17px; }
    &#eye-2{ right: 17px; }
      
  }

  .mouth{
    background: @grayDarker;
    border-radius: 30px;
    bottom: 2px;
    clip: rect(8px, 15px, 16px, 0);
    height: 16px;
    margin-left: -7.5px;
    position: absolute;
    left: 50%;
    width: 15px;
  }
  
  .bell{
    animation: rotating 3s infinite;
    height: 140%;
    left: 50%;
    margin-left: -11px;
    position: absolute;
    top: 5px;
    transform-origin: 50% 0;
    z-index: 1;
    width: 22px;
    
    &:before, &:after{
      border: 1px solid #5C5C5C;
      content: ' ';
      display: block;
      float: left;
      height: 100%;
      z-index: -1;
      width: 10px;
    }
    
    &:before{
      background: @gray;
      border-radius: 20px 0 0 20px;
      border-right: 0;
    }
    
    &:after{
      background: @grayDarker;
      border-radius: 0 20px 20px 0;
      border-left: 0;
    }
  }
}

// animation

@keyframes belling{
  0%{
    transform: rotate(-45deg);
  }
  50%{
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(-45deg);
  }
}

@keyframes rotating{
  0%{
    transform: rotate(20deg);
  }
  50%{
    transform: rotate(-20deg);
  }
  100%{
    transform: rotate(20deg);
  }
}