html5钟表效果

看见有钟表的效果不错：
<!DOCTYPE>
<html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/experiment.css"type="text/css">
<link rel="stylesheet" href="css/experiment.css"type="text/css">

<style type="text/css">
body.experiment {
background: #fff;
}

.start {
text-align: center;
font-size: 2em;
font-weight: bold;
margin: 5em;
}

#clock {
position: relative;
width: 378px;
height: 378px;
background-image: url('http://pic002.cnblogs.com/images/2012/385052/2012031316573623.png');
left: 50%;
margin: 5em 0 0 -189px;
}

#clock div {
position: absolute;
}
</style>
</head>
<body class="experiment">

<div id="wrapper">
     <header id="header">
         <aside class="tweetThis">
             <a href="http://www.cnblogs.com/wangyunbing/" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr">滴水成兵</a>
         </aside>
     </header>

<div id="experiment">

     <div id="clock">
         <div id="hour"><img src=/2012/0314/20120314095948127.png" alt=""></div>
         <div id="minute"><img src=/2012/0314/20120314095948432.png" alt=""></div>
         <div id="second"><img src=/2012/0314/20120314095948465.png" alt=""></div>
     </div>
</div>


</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">

$(function(){

    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('div');

    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    startClock();
    setInterval(function(){startClock();},1000)
    function startClock() {
        var angle = 360/60,
            date = new Date(),
            hour = (function() {
                var h = date.getHours();
                if(h > 12) {
                    h = h - 12;
                }
                return h
            })(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourAngle = (360/12) * hour + (360/(12*60)) * minute;

        if(prop) {
            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
        }
    }
    document.title = date
});
</script>

</body>
</html>

摘自滴水成兵

补充：web前端 , HTML 5 ,