Skip to content

Instantly share code, notes, and snippets.

@touhonoob
Forked from anonymous/index.html
Created October 27, 2014 17:02
Show Gist options
  • Save touhonoob/b5dc3b119d70b6cc76a1 to your computer and use it in GitHub Desktop.
Save touhonoob/b5dc3b119d70b6cc76a1 to your computer and use it in GitHub Desktop.
<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>
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment