Skip to content

Instantly share code, notes, and snippets.

@crazyrohila

crazyrohila/dabblet.css

Forked from anonymous/dabblet.css
Created February 28, 2013 18:16
Show Gist options
  • Save crazyrohila/5058863 to your computer and use it in GitHub Desktop.
Save crazyrohila/5058863 to your computer and use it in GitHub Desktop.
Download ZIP
Bat-ball
Raw
dabblet.css
/**
* Bat-ball
*/
@keyframes ball {
0% {
left: -20%;
transform: rotate(0deg);
}
30% {
top: -10px;
}
80% {
left: 74%;
top: 250px;
transform: rotate(2020deg);
}
100% {
left: 10%;
top: -50%;
transform: scale(.1);
}
}
#throw:checked ~ div {
animation-play-state: running;
transform: rotate(10deg);
transition: 0.8s 3.77s transform;
}
#throw:not(:checked) ~div {
animation-name: none;
transform: rotate(0deg);
transition: 0s 0s transform;
}
input.cbox {display:none;}
.label {
cursor:pointer;
position: absolute;
color: #008080;
font-size: 200%;
padding: 5px 10px;
border: 2px solid #008080;
border-radius: 10px;
box-shadow: 2px 2px 10px gray;
}
.label:hover {
color: white;
background: #008080;
}
#ball {
width: 200px;
height: 200px;
border-radius: 100px;
background-image: linear-gradient(left, red, green);
position: absolute;
top: 250px;
left: -20%;
animation-name: ball;
animation-duration:5s;
animation-timing-function:linear;
animation-play-state:paused;
}
#bat {
width: 10px;
height: 300px;
background: black;
position: absolute;
right: 10%;
top: 100px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<label for="throw" class="label" id="labelthrow">Play</label>
<input type="checkbox" id="throw" class="cbox" value="throw" />
<div id="ball"></div>
<div id="bat"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment