Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created March 12, 2012 11:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexmwalker/2021341 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexmwalker/2021341 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
#court{
width:1000px;
height:300px;
border:3px #000 dotted;
position:relative}
#target{
width:20px;
height:20px;
outline:1px red dashed;
position:absolute;
background:rgba(255,0,0,.2)
}
#ball{
width:20px;height:20px;border-radius:20px;
background:red;
position:absolute;
}
#target:hover{
animation: target 2.7s infinite linear;
}
#target:hover #ball{
animation:
xstuff 2.7s linear infinite,
ystuff 3.1s linear infinite
}
@keyframes xstuff {
0%, 100% {transform: translateX(0)}
50% {transform: translateX(1000px);}
}
@keyframes ystuff {
0%, 100% {margin-top: 0}
50% {margin-top: 300px;}
}
@keyframes target {
0% {width: 20px;height: 20px}
2% {width: 20px;height: 20px}
3% {width: 1000px;height: 300px}
98% {width: 1000px;height: 300px}
99% {width: 20px;height: 20px}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="court">
<div id="ball">
<div id="target"></div>
</div>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment