【魅力CSS】使用CSS3动画制作时钟

倒倒苦水

做完这个小玩意之后，我觉得，我一定是闲得蛋疼才做的。嗯，一定是的。

话说昨天今天加班，下午下班前总算把临时变更的需求完成的七七八八了，昨晚又爬了一趟南山，累的不行...

想起某个产品说的，工作累了，就写写代码，休息一下 =_=||

好了，言归正传。下午偶然看到一个jquery+css3实现的时钟，挺漂亮的，突然觉得是不是也可以用纯css3整一个，于是乎...先看看最终效果

或者你也可以直接点这里看代码（因为我太喜欢啰嗦啦...）
more

表盘

好了，先搭个结构，html挺简单的，没几个代码，看看下面：

<div class="clock">
    <div class="clock-dial">
        <span></span>...<span></span>
    </div>
    <div class="clock-pointer">
        <div></div><div></div><div></div><div></div>
    </div>
</div>

嗯，一个整体容器，一个表盘，加上三根指针。等等，那个省略了的span，你猜有多少个？

那里总共有60个span，没错，是的，60个！诶，为了表示刻度，咱也没法子呀。

先给 clock 和 clock-dail写上样式，配个色搞点阴影什么的，哇，帅气！

然后麻烦的刻度定位来了，尝试了几种方式，最终决定给内圆画60个半径，全部排在12点钟的方向，transform-origin设置成最下面((50% 100%) or (center bottom)) 然后按顺序旋转 6弧度(transform:rotate(6deg))，铺满整个圆。然后用 before 伪对象插入最终显示的刻度。为了定位和演示，暂时把刻度的容器都显示出来了。不了解transform的请看这里(http://www.w3.org/TR/css3-2d-transforms/)

.clock-dial span{
    display: block;
    width: 2px;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -1px;
    -webkit-transform-origin: center bottom;
}
.clock-dial span:before{
    content:' ';
    display: block;
    height: 13px;
    width: 2px;
    background: #353535;
    margin: 10px 0 0 0;
}
/** 四个大刻度 **/
.clock-dial span:nth-child(5n){
    width: 6px;
    margin-left: -3px;
}
.clock-dial span:nth-child(5n):before{
    height: 32px;
    width: 6px;
    border-radius: 0 0 5px 5px;
}
/** end 四个大刻度 **/
/** 各个刻度的定位 **/
.clock-dial span:nth-child(1){
    -webkit-transform: rotate(6deg);
}
.clock-dial span:nth-child(2){
    -webkit-transform: rotate(12deg);
}
/** ...省呀省略呀 **/
.clock-dial span:nth-child(60){
    -webkit-transform: rotate(360deg);
}
/** end 各个刻度的定位 **/

跟你看到的一样, 画刻度的代码可是又臭又长的. 什么? 你手打了60 * 3次(webkit, moz, w3c)? 拜托, 我们是程序员耶. 写个for循环拼装字符串, 几秒钟搞定(这个代码我就不写了, 程序员都懒嘛~~). 每逢5的倍数, 数到的刻度要粗点, 表示一刻钟, 嗯, 又粗又长.(nth-child 是什么? 看看这里)

指针

指针也是一样操作，先摆到12点钟方向，变形原点放在下面，之后再把第四个div搞成圆形(border-radius等于宽高就行了)，盖在中间，是不是一个钟就出来啦。秒针做一下微调，用before和after插入两个节点，做成尾巴。为什么不用标签？因为刻度已经用了那么多节点，能省就省啦（该死的刻度！）

.clock-pointer{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.clock-pointer div{
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;

    -webkit-transform-origin: center bottom;
}
.clock-pointer div:nth-child(1){
    border-radius: 10px 10px 0 0;
    width: 20px;
    height: 110px;
    margin: -110px 0 0 -10px;
    -webkit-animation: hour-update 43200s linear infinite;
}
.clock-pointer div:nth-child(2){
    border-radius: 5px 5px 0 0;
    width: 10px;
    height: 180px;
    margin: -180px 0 0 -5px;
    -webkit-transform: rotate(60deg);
    -webkit-animation: minute-update 3600s linear infinite;
}
.clock-pointer div:nth-child(3){
    border-radius: 5px 5px 0 0;
    width: 6px;
    height: 190px;
    margin: -190px 0 0 -3px;
    background: #AD251E;
    -webkit-transform: rotate(90deg);
    -webkit-animation: second-update 60s step-end infinite;
}
.clock-pointer div:nth-child(3):before{
    content: ' ';
    background: #AD251E;
    display: block;
    width: 6px;
    height: 30px;
    position: absolute;
    left: 0;
    bottom: -30px;
}
.clock-pointer div:nth-child(3):after{
    content: ' ';
    border-radius: 3px;
    background: #AD251E;
    display: block;
    width: 12px;
    height: 40px;
    position: absolute;
    left: -3px;
    bottom: -60px;
}
.clock-pointer div:nth-child(4){
    background: #AD251E;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 12px;
}

数字

是不是漏了什么？数字，没数字太不直观了。嗯，我们之前已经加了60个刻度，只要在逢5的刻度插入一个数字不就行啦。但是在60个span中找出12个，貌似也很痛苦对吧。

哈哈，如果你还记得大明湖畔的counter-reset和counter-increment，你一定知道怎么做了(如果你实在不记得, 请看这里)。因为刻度所在的span被旋转过了，导致插入的数字也旋转了，因此要对每个数字再转回来。跟上面一样，这里肯定是用for循环跑出来的啦(别告诉我你又手打了...)

.clock-dial span:nth-child(5n):after{
    content: counter(clockcounter);
    counter-increment:clockcounter;
    font: 50px/1 Georgia;
    font-weight: bold;
    font-style: italic;
    color: #494949;
    position: absolute;
    left: -30px;
    width: 60px;
    text-align: center;
}
.clock-dial span:nth-child(5):after{    -webkit-transform: rotate(-30deg);}
/** ......(无所不在的省略号) **/
.clock-dial span:nth-child(60):after{    -webkit-transform: rotate(-360deg);}

奔跑吧

终于到了最激动人心的时刻啦，接下来让时钟动起来。css3的animation是个好东西，step-end也是个好孩子，如果你没听过，先看看这里和那里＾_＾

让秒针的动画60s转一圈，分针 60分一圈，时针12小时一圈，就能模拟时间的流逝了。分针和时针的动画没什么好说呃，相当简单。

/************* 时针的动画 ******************/
@-webkit-keyframes hour-update{
    0%{ -webkit-transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); }
}
/************* 分针的动画 ******************/
@-webkit-keyframes minute-update{
    0%{ -webkit-transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); }
}

而秒针的有点麻烦，由于keyframes的进度是0~100%的，而秒针一次动画的时间是60s，就需要把100的区间分成60段。不过还好咱是程序员， for循环一下不就结了？(悲催的for ^_^)

/************* 秒针的动画 ******************/
@-webkit-keyframes second-update{
    0%{ -webkit-transform: rotate(0deg);}
    1.667%{ -webkit-transform: rotate(6deg);}
    ......
    98.333%{ -webkit-transform: rotate(354deg);}
    100%{ -webkit-transform: rotate(360deg);}
}

最后，上动画，噔噔噔噔~~你看，他动起来了，啊，一秒一格，啊，奔跑吧~(请原谅这个2b作者吧...)

.clock-pointer div:nth-child(1){
    -webkit-animation: hour-update 43200s linear infinite;
}
.clock-pointer div:nth-child(2){
    -webkit-animation: minute-update 3600s linear infinite;
}
.clock-pointer div:nth-child(3){
    -webkit-animation: second-update 60s step-end infinite;
}

不足

嗯，其实我觉得没什么不足的，嘿嘿。太自恋了。

最大的问题在于，因为没有用到丁点儿js，所以不能从系统当前时间开始跑，只能当秒表用用。或者上厕所的时候打开这个页面，开始计时，看看自己用了多少时间"爆石" _|||

Comments

kk reply

2012-05-08 08:50:39

哈哈，我喜欢你后面的不足

【魅力CSS】使用CSS3动画制作时钟

倒倒苦水

表盘

指针

数字

奔跑吧

不足

Recent Articles

Tags