Skip to content

Instantly share code, notes, and snippets.

@colourgarden

colourgarden/dabblet.css

Created January 27, 2012 10:08
Show Gist options
  • Save colourgarden/1688098 to your computer and use it in GitHub Desktop.
Save colourgarden/1688098 to your computer and use it in GitHub Desktop.
Download ZIP
Spinning timer
Raw
dabblet.css
/**
* Spinning timer
*/
html{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;
}
body{margin: 200px;}
.circle{
position: absolute;
display: block;
left: 50%;
margin-left: -50px;
top: 40%;
animation: rotate 4s infinite linear;
}
s{
position: relative;
display: block;
width: 100px;
height: 50px;
background: #fff;
}
s:first-child{
border-radius: 100px 100px 0 0;
animation: offset-alpha 2s infinite 1s;
}
s:last-child{
border-radius: 0 0 100px 100px;
animation: offset-beta 2s infinite;
}
@keyframes rotate {
to{ transform: rotate(720deg) }
}
@keyframes offset-alpha {
33%{ transform: translate(25px) }
66%{ transform: translate(-25px) }
}
@keyframes offset-beta {
33%{ transform: translate(-25px) }
66%{ transform: translate(25px) }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<span class="circle">
<s></s>
<s></s>
</span>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment