css clock

by paulftw

HTML

<div id=clock>
  <div id=hour>
  </div>
  <div id=minute>
  </div>
  <div id=second>
  </div>
  <div id=center>
  </div>

</div>

CSS

body {
    background-color: #000;
}

* {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

#clock {
    font-size: 5px;
    margin: auto;
    margin-top: 6em;
    position: relative;
    height: 30em;
    width: 30em;
    background-color: #444;
    border-radius: 15em;
    border: 0.5em solid #ccc;
    box-shadow: inset 0.3em 0.5em 1.5em 0.1em rgba(0, 0, 0, 0.7);
}
#center {
    display: none;
    z-index: 200;
    position: absolute;
    top: 15em;
    left: 15em;
    width: 0.4em;
    height: 0.4em;
    margin-left: -0.2em;
    margin-top: -0.2em;
    background-color: #44e;
    border-radius: 0.2em;
}


#minute {
    z-index: 100;
    width: 15em;
    height: 0.2em;
    background-color: #ddd;
    position: absolute;
    margin: -0.1em 0 0 -3em;
    -webkit-transform-origin: 3em 0.1em;
    -webkit-transform: rotate(-90deg);
}

#second {
    z-index: 90;
    width: 18em;
    height: 0.2em;
    background-color: #d00;
    position: absolute;
    margin: -0.1em 0 0 -5em;
    -webkit-transform-origin: 5em 0.1em;
    -webkit-transform: rotate(-100deg);
}

#hour {
    z-index: 80;
    width: 10em;
    height: 0.5em;
    background-color: #ddd;
    margin: -0.2em 0 0 -2em;
    -webkit-transform-origin: 2em 0.2em;
    -webkit-transform: rotate(-80deg);
}

#minute, #second, #hour {
    position: absolute;
    top: 15em;
    left: 15em;
    box-shadow: 0.3em 1.2em 1em 0.1em rgba(0, 0, 0, 0.7);
}

JavaScript

$(function() {
    var rotate = function(el, deg) {
        var len = 1.25;
        var sdeg = 30 - deg;
        var rad = sdeg * Math.PI / 180;
        var x = len * Math.cos(rad);
        var y = len * Math.sin(rad);
        var val = x.toFixed(3) + 'em ' + y.toFixed(3) + 'em 1.5em 0.2em rgba(0,0,0,0.7)';
        el.css('box-shadow', val);

        el.css('-webkit-transform', 'rotate(' + deg + 'deg)');

    };
        
    var update = function() {
        var d = new Date();
        var s = 6 * d.getSeconds() - 90 + 360 * d.getMinutes();
        var m = 6 * d.getMinutes() - 90;
        var h = 30 * d.getHours() + d.getMinutes() / 2 - 90;
        rotate($('#second'), s);
        rotate($('#minute'), m);
        rotate($('#hour'), h);
    };
    window.setInterval(update, 1000);
});