Skip to content

Instantly share code, notes, and snippets.

@crazyrohila

crazyrohila/dabblet.css

Created February 28, 2013 18:11
Show Gist options
  • Save crazyrohila/5058821 to your computer and use it in GitHub Desktop.
Save crazyrohila/5058821 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 watch.
Raw
dabblet.css
/**
* CSS3 watch.
*/
#clock {
background:url(http://www.paulrhayes.com/experiments/clock/images/clockFace.png) no-repeat;
width: 376px;
height: 378px;
border: 10px solid gray;
border-radius:50%;
position: relative;
top: 200px;
left:35%;
}
input.cbox {display:none;}
.label {
cursor:pointer;
position: absolute;
top: -25%;
left: 40%;
color: #008080;
font-size: 200%;
padding: 5px 10px;
border: 2px solid #008080;
border-radius: 10px;
box-shadow: 2px 2px 10px gray;
}
.label:after{content:"Start"}
.label:hover {color:white;background:#008080;}
#clock > div {position: absolute;transform-origin: bottom;}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#start:checked ~ div {
animation-name: rotate;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#hour {
width: 10px;
height: 120px;
background: #ff0000;
top: 67.5px;
left: 183px;
animation-duration:43200s;
}
#min {
width: 6px;
height: 150px;
background: #cc0000;
top: 37.8px;
left: 185.5px;
animation-duration: 3600s;
}
#sec {
width: 2px;
height: 160px;
background: #990000;
top: 29.3px;
left: 187.5px;
animation-duration:60s;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="clock">
<label for="start" class="label" id="labelstart"></label>
<input type="checkbox" id="start" class="cbox" value="start" />
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
</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