Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created February 28, 2013 13:29
Show Gist options
  • Save anonymous/5056693 to your computer and use it in GitHub Desktop.
Save anonymous/5056693 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
@keyframes pump {
0% {
top: 0;
left: 0;
font-size: 100px;
transform: rotate(0deg);
}
50% {
top: 50px;
left: 100px;
font-size: 150px;
}
100% {
top: 0;
left: 200px;
font-size: 100px;
transform: rotate(360deg);
}
}
#pump {
position: absolute;
color: red;
font-size: 100px;
animation: pump 1s infinite;
}
@keyframes ball {
0% {
left: -20%;
transform: rotate(0deg);
}
30% {
top: -10px;
}
80% {
left: 74%;
top: 250px;
}
100% {
left: 50%;
top: -50%;
transform: rotate(360deg);
}
}
#ball {
width: 200px;
height: 200px;
border-radius: 100px;
background-image: linear-gradient(left, red, green);
position: absolute;
top: 250px;
animation: ball 5s infinite;
}
#bat {
width: 10px;
height:300px;
background: black;
position: absolute;
right: 10%;
top: 100px;
transform: rotate(10deg);
transition: .8s 3.77s transform;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="pump">&#x2665;</div>
<div id="ball"></div>
<div id="divder"></div>
<div id="bat"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment