index.html

<div id="home" data-role="page">
  <div role="main" class="ui-content">
    <h1>Contract On</h1>
    <div class="effect">
      <div class="blackball"></div>
      <div class="redball"></div>
      <div class="greenball"></div>
      <div class="blueball"></div>
    </div>
  </div>
</div>
<div id="home" data-role="page">
  <div role="main" class="ui-content">
    <h1>Contract Off</h1>
    <div class="effect effect-nocontract">
      <div class="blackball"></div>
      <div class="redball"></div>
      <div class="greenball"></div>
      <div class="blueball"></div>
    </div>
  </div>
</div>

pgyHm.markdown

pgyHm

A Pen by JohnsonChung on CodePen.

License.

style.css

html,body,div[data-role="page"],.ui-content{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body { 
  text-align: center;
}
#home {
  width: 300px;
  display: inline-block;
}
div{
  box-sizing:border-box;
  position:relative;
}
.effect{
  width:100%;
  height:100%;
  padding-top:50px;
  -webkit-filter:contrast(10);
  background:#fff;
}
.effect-nocontract {  
  -webkit-filter: none;
}
.blackball{
  width:100px;
  height:100px;
  background:black;
  padding:10px;
  border-radius:50%;
  margin:0 auto;
  z-index:1;
  -webkit-filter:blur(5px);
}
.redball{
  width:60px;
  height:60px;
  background:#f00;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:70px;
  left:50px;
  z-index:2;
  -webkit-filter:blur(5px) ;
  -webkit-animation:rball 6s infinite;
}
@-webkit-keyframes rball{
  0%,100%{
    left:35px;
    width:60px;
    height:60px;
  }
  4%,54%{
    width:60px;
    height:60px;
  }
  10%,60%{
    width:50px;
    height:70px;
  }
  20%,70%{
    width:60px;
    height:60px;
  }
  34%,90%{
    width:70px;
    height:50px;
  }
  41%{
    width:60px;
    height:60px;
  }
  50%{
    left:calc(100% - 95px);
    width:60px;
    height:60px;
  }
}
.greenball{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:0;
  z-index:2;
  -webkit-filter:blur(8px) ;
  -webkit-animation:gball 6s infinite;
}
.blueball{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:240px;
  z-index:2;
  -webkit-filter:blur(8px) ;
  -webkit-animation:bball 6s infinite;
}
@-webkit-keyframes gball{
  0%,100%{
    left:0;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:75px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    top:215px;
    left:110px;
    width:110px;
    height:110px;
  }
}
@-webkit-keyframes bball{
  0%,100%{
    left:240px;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:165px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    left:110px;
    top:215px;
    width:110px;
    height:110px;
  }
}