<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background:#123456;
}
.clock{
position:relative;
width:300px;
height:300px;
border:20px solid #fff;
border-radius:50%;/*有变化的值*/
/*DIV默认透明的*/
}
.clock:before{
content:"";
}
.clock:after{
content:"";
display:block;
position:absolute;
border:10px solid #fff;
border-radius:50%;
top:50%;
left:50%;
margin-left:-10px;/*高度一半*/
margin-top:-10px;/*宽度一半*/
/*
外边距 +内边距 ＋边框 ＋ 宽度／高度
０ ０ １０＋１０ ０
*/
}
#h,#i,#s{
position:absolute;
width:10px;
left:50%;
bottom:50%;
margin-left:-5px;
background:#fff;
border-radius:10px 10px 0px 0px;
transform-origin:center bottom;
}
#h{
height:80px;
}
#i{
height:115px;
transform:rotate(45deg);
}
#s{
height:150px;
transform:rotate(90deg);
}
#d{
position:absolute;
width:200px;
height:300px;
left:50%;
margin-left:-10px;
animation:dh 1s linear infinite alternate;
-webkit-animation:dh 1s linear infinite alternate;
}
#d:after{
content:"";
display:block;
width:20px;
height:20px;
background:#666;
position:absolute;
bottom:-20px;
border-radius:50%;
}
@-webkit-keyframes dh{
100%{
transform:rotate(-180deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div id="h"></div>
<div id="i"></div>
<div id="s"></div>
<div id="d"></div>
</div>
<!--
<?php
// date("Y-m-d H:i:s",time());
?>
-->
</body>
</html>
<script type="text/javascript">
setInterval("times()",1000);
function times(){
var date = new Date();
var h = date.getHours();//活的小时
var i = date.getMinutes();//获取分钟
var s= date.getSeconds();//获取秒数
var m = date.getMonth();//获取月份
setDeg("h",15*h);
setDeg("i",6*i);
setDeg("s",6*s);
}
function setDeg(id,deg){
document.getElementById(id).style.cssText="transform:rotate("+deg+"deg)";
}
</script>
原文：http://www.cnblogs.com/xiaoshitou188/p/5218610.html