PureCssClock

index.html

<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.markdown

PureCssClock

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

A Pen by Shashank on CodePen.

License.

script.js

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;

style.css

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);
  }
}

XmYBZx.markdown

XmYBZx

A Pen by Shashank on CodePen.

License.