摘要：原文第一次發(fā)文章，比較激動(dòng)。其實(shí)簡(jiǎn)單點(diǎn)的話(huà)直接在里面定好動(dòng)畫(huà)規(guī)則就行了時(shí)針秒旋轉(zhuǎn)度，分針秒針以此類(lèi)推。好了，以上代碼我已經(jīng)放在了上就這些了，獻(xiàn)個(gè)丑，各位輕拍

  
原文：http://margox.me/css3clock.html

第一次發(fā)文章，比較激動(dòng)。
本碼農(nóng)長(zhǎng)期浸淫于Dribbble等設(shè)計(jì)師網(wǎng)站，看到那些好看的設(shè)計(jì)作品就非常激動(dòng)，但是無(wú)奈PS不精通，AI也早忘光了，只不過(guò)對(duì)前端略有研究，偶然間看到幾個(gè)設(shè)計(jì)清爽的時(shí)鐘，覺(jué)得用CSS實(shí)現(xiàn)起來(lái)應(yīng)該也沒(méi)什么難度，于是花了個(gè)把鐘頭琢磨了一個(gè)出來(lái)。

box-shadow 表盤(pán)的質(zhì)感什么的全靠它了

nth-child(x) 用于表盤(pán)刻度的定位什么的

transform-origin 這個(gè)用來(lái)定位三個(gè)表針旋轉(zhuǎn)的中心點(diǎn)

keyframes 表針動(dòng)畫(huà)效果

先設(shè)計(jì)好DOM結(jié)構(gòu)，代碼如下：

結(jié)構(gòu)很簡(jiǎn)單，從樣式名可以看出來(lái)每個(gè)元素的用處，中間那段空div自然就是表盤(pán)刻度了。
接下來(lái)是CSS代碼

html,body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(#e7e7e7,#d7d7d7);
}
/*時(shí)鐘容器*/
.clock-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 100px;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    padding: 5px;
    background-image: linear-gradient(#f7f7f7,#e0e0e0);
    border-radius: 50%;
    box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);

}
/*表盤(pán)*/
.clock-base{
    width: 250px;
    height: 250px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 5px #eee;
}
/*表盤(pán)刻度容器*/
.click-indicator{
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 15px;
    width: 230px;
    height: 230px;
}
/*表盤(pán)刻度*/
.click-indicator div{
    position: absolute;
    width: 2px;
    height: 4px;
    margin: 113px 114px;
    background-color: #ffffd;
}
/*分別設(shè)置各個(gè)刻度的位置和角度*/
.click-indicator div:nth-child(1) {
    transform: rotate(30deg) translateY(-113px);
}
.click-indicator div:nth-child(2) {
    transform: rotate(60deg) translateY(-113px);
}
.click-indicator div:nth-child(3) {
    transform: rotate(90deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(4) {
    transform: rotate(120deg) translateY(-113px);
}
.click-indicator div:nth-child(5) {
    transform: rotate(150deg) translateY(-113px);
}
.click-indicator div:nth-child(6) {
    transform: rotate(180deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(7) {
    transform: rotate(210deg) translateY(-113px);
}
.click-indicator div:nth-child(8) {
    transform: rotate(240deg) translateY(-113px);
}
.click-indicator div:nth-child(9) {
    transform: rotate(270deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(10) {
    transform: rotate(300deg) translateY(-113px);
}
.click-indicator div:nth-child(11) {
    transform: rotate(330deg) translateY(-113px);
}
.click-indicator div:nth-child(12) {
    transform: rotate(360deg) translateY(-113px);
    background-color: #c00;
}
/*時(shí)針*/
.clock-hour{
    position: absolute;
    z-index: 2;
    top: 80px;
    left: 128px;
    width: 4px;
    height: 65px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 50px;
    transition: .5s;
    -webkit-animation: rotate-hour 43200s linear infinite;
}
/*分針*/
.clock-minute{
    position: absolute;
    z-index: 3;
    top: 60px;
    left: 128px;
    width: 4px;
    height: 85px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 70px;
    transition: .5s;
    -webkit-animation: rotate-minute 3600s linear infinite;
}
/*秒針*/
.clock-second{
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 129px;
    width: 2px;
    height: 130px;
    background-color: #a00;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 1px 110px;
    transition: .5s;
    -webkit-animation: rotate-second 60s linear infinite;
}
.clock-second:after{
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    bottom: 14px;
    width: 8px;
    height: 8px;
    background-color: #a00;
    border: solid 2px #a00;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*表盤(pán)中央的原型區(qū)域*/
.clock-center{
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    top: 55px;
    left: 55px;
    background-image: linear-gradient(#e3e3e3,#f7f7f7);
    border-radius: 50%;
    box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 65px;
    background-color: #ffffd;
    border-radius: 50%;
}

樣式文件就這些，不過(guò)這樣的話(huà)三個(gè)指針都是在12點(diǎn)的，接下來(lái)需要讓指針動(dòng)起來(lái)。
其實(shí)簡(jiǎn)單點(diǎn)的話(huà)直接在css里面定好動(dòng)畫(huà)規(guī)則就行了:時(shí)針43200秒旋轉(zhuǎn)360度，分針秒針以此類(lèi)推。
但是強(qiáng)迫癥表示這樣堅(jiān)決不行，連正確的時(shí)間都不能指示的時(shí)鐘肯定是山寨品，所以這里需要找CSS的好兄弟JavaScript借下力了：

(function(){

    //generate clock animations
    var now       = new Date(),
        hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
        minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
        secondDeg = now.getSeconds() / 60 * 360,
        stylesDeg = [
            "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
            "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
            "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
        ].join("");

    document.getElementById("clock-animations").innerHTML = stylesDeg;

})();

哦，千萬(wàn)別忘了在head標(biāo)簽里面放點(diǎn)東西：

不然JS生成的樣式代碼沒(méi)地方安身啊。

好了，以上代碼我已經(jīng)放在了jsbin上：
http://output.jsbin.com/xeraxe

就這些了，獻(xiàn)個(gè)丑，各位輕拍~ ：）