Skip to content

Instantly share code, notes, and snippets.

@shankscript
Last active October 31, 2015 17:23
Show Gist options
  • Save shankscript/7d78017eb223ee4ff6bb to your computer and use it in GitHub Desktop.
Save shankscript/7d78017eb223ee4ff6bb to your computer and use it in GitHub Desktop.
PureCssClock
<div class='clock'>
<p id='t'>12</p>
<p id='r'>3</p>
<p id='l'>9</p>
<p id='b'>6</p>
<div class='hr'>
<div class='wrap'>
<div class='in'></div>
</div>
</div>
<div class='min'>
<div class='wrap'>
<div class='in'></div>
</div>
</div>
<div class='sec'>
<div class='wrap'>
<div class='in'></div>
</div>
</div>
</div>

PureCssClock

Pure CSS based Clock. An example to showcase the CSS3 animations and cool properties.

A Pen by Shashank on CodePen.

License.

var d = new Date();
var secDeg = d.getSeconds() / 60 * 360;
var minDeg = d.getMinutes() / 60 * 360 + secDeg / 60;
var hrDeg = (d.getHours() % 12) / 12 * 360 + minDeg / 12;
console.log(d.getMinutes());
document.querySelector('.sec .wrap').style.transform = 'rotateZ(' + secDeg + 'deg)';
document.querySelector('.min .wrap').style.transform = 'rotateZ(' + minDeg + 'deg)';
document.querySelector('.hr .wrap').style.transform = 'rotateZ(' + hrDeg + 'deg)';
document.querySelector('.clock').classList.add('anim');
console.log(d.getSeconds(), secDeg);
d = secDeg = minDeg = hrDeg = null;
body {
text-align: center;
background-color: #726DCA;
}
* {
font-family: 'Merriweather', serif !important;
}
.clock {
width: 340px;
height: 340px;
/*border: 9px dashed rgb(85, 80, 165);*/
border-radius: 50%;
box-shadow: inset 0 50px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
position: relative;
background: url('http://shankscript.com/cdn/bg.jpg');
background-position: 39% 67%;
background-repeat: no-repeat;
background-size: 107% 108%;
margin: 10px auto;
background-color: #5C5C5C;
}
.clock p {
position: absolute;
color: #931A1A;
font-size: 3em;
line-height: 1;
padding: 0;
margin: 0;
text-shadow: 2px 2px 2px rgba(255, 107, 107,0.7);
}
#t {
top: 0;
left: 0;
right: 0;
}
#b {
bottom: 6px;
left: 0;
right: 0;
}
#r {
top:calc(50% - 0.71em);
right: 6px;
}
#l {
top:calc(50% - 0.71em);
left: 6px;
}
.clock:after {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 0 auto;
display: block;
content: ' ';
background-color: #3A3A3A;
top: calc(50% - 16px);
position: absolute;
left: 0;
right: 0;
box-shadow: inset 2px 2px rgba(200,200,200,0.3), 2px 2px 5px 2px rgba(100,100,100,0.2);
}
.in {
width: 2px;
position: relative;
top: 5%;
border: 5px solid transparent;
border-bottom: 215px solid #fff;
left: -3.4px;
right: 0;
border-radius: 5px;
}
.wrap {
height: 100%;
}
.sec {
position: relative;
width: 5px;
height: 100%;
margin: 0 auto;
display: block;
top: -200%;
animation-duration: 60s;
}
.sec .in {
width: 0px;
top: -1%;
border: 5px solid transparent;
border-bottom: 252px solid #931A1A;
}
.min {
position: relative;
width: 5px;
height: 100%;
margin: 0 auto;
display: block;
top: -100%;
animation-duration: 3600s;
}
.min .in {
width: 3px;
top: 12%;
border-bottom: 198px solid #242020;
border-radius: 0px;
}
.hr {
position: relative;
width: 5px;
height: 100%;
margin: 0 auto;
display: block;
top: 0;
animation-duration: 43200s;
}
.hr .in {
top: 16%;
border: 12px solid transparent;
border-bottom: 179px solid #931A1A;
left: -9.4px;
}
.anim .sec, .anim .min, .anim .hr {
animation-iteration-count: infinite;
animation-name: second;
animation-timing-function: linear;
}
@keyframes second {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359.999999deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment