A Pen by Captain Anonymous.

index.html

<span class="wrapper">
  <span class="p1"></span>
  <span class="p2"></span>
  <span class="p2 green"></span>
  <span class="p3"></span>
  <span class="p4"></span>
  
  <span class="bubble b1"></span>
  <span class="bubble b2"></span>
  <span class="bubble b3"></span>
  <span class="bubble b4"></span>
    
</span>

QwWWgX.markdown

QwWWgX

Forked from Cornel Stefanache's Pen qofvL.

A Pen by Captain Anonymous on CodePen.

License.

style.less

html,body { height:100%; margin:0; padding: 20px; background-color: #FFF;}

@substance: #FF69A5;
@glass: lighten(#AFEAFA, 1%);

.wrapper {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;  
  margin:0px auto;
  padding-top: 50px;  
  
  .p1 {
    display: block;    
    width: 36px;
    height: 4px;
    border: 1px solid @glass;
    border-bottom: 1px solid darken(@glass, 30%);
    margin: 0px auto;
    border-radius: 5px;
    background-color: @glass;
  }
  
  .p2 {
    display: block;    
    width: 30px;
    height: 30px;
    border: 1px solid @glass;
    margin: 0px auto;
    background-color: @glass;
    
    &.green {
      height: 10px;
      border: 1px solid @substance;
      background-color: @substance;
    }
  }
  
  .p3 {
    display: block;    
    width: 32px;
    margin: 0px auto;
    border-left: 50px solid transparent;
	 border-right: 50px solid transparent;
	 border-bottom: 90px solid @substance;
  }
  
  .p4 {
    display: block;    
    width: 132px;
    height: 14px;
    border: 1px solid @substance;
    background-color: @substance;
    margin:-1px  auto;      
    border-radius: 4px 4px 10px 10px;
    border-bottom: 2px solid darken(@glass, 30%);
  }
  
  @-webkit-keyframes bobby {
    0% {
      top: 180px;
      width: 2px;
      height: 2px;
      border-radius: 1px;
      border: 1px solid @glass;
      background-color: @glass;
      opacity: 1;
    }
    
    
    70% {
      top: 82px;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      margin-left:-7px;
      margin-top: -7px;
      border: 1px solid @substance;      
      opacity: 0.4;
    }
    
    
    
    95% {
      top: 30px;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      margin-left:-7px;
      margin-top: -7px;
      background-color: @substance;
      border: 1px solid darken(@substance, 10%);
      opacity: 0.3;
    }
    
    100% {
      top: 30px;
      width: 30px;
      height: 30px;
      border-radius: 15px;
      margin-left:-15px;
      margin-top: -15px;
      background-color: darken(@substance, 20%);
      border: 1px solid darken(@substance, 5%);
      opacity: 0.1;
    }
  }
  
  .bubble {     
    position: absolute;    
    top: 150px;    
    border: 1px solid @substance;
    
    
    &.b1 {
      left: 150px;        
      -webkit-animation: bobby 1s infinite normal;
    }
    
    &.b2 {
      left: 142px;        
      -webkit-animation: bobby 1.3s infinite normal;
    }
    
    &.b3 {
      left: 145px;        
      -webkit-animation: bobby 1.7s infinite normal;
    }
    
    &.b4 {
      left: 147px;        
      -webkit-animation: bobby 1.5s infinite normal;
    }
  }
  
}