漂亮jQuery和CSS3制作数字时钟(CSS3篇)

数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。

HTML

我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中。

 

<div?id="clock"?class="light">?
????<div?class="display">?
????????<div?class="digits">?
????????????...数字?
????????</div>?
????</div>?
</div>?

我们准备展示的数字时钟格式HH:mm:ss,它由时分秒8个数字和2个分隔符“:”组成,数字是由7个短横杠组成,如数字8它由7个短横杠构成,我们在html里使用.d1~.d7七个span元素,通过CSS的来确定不同数字的显示效果。将以下代码加到上述.digits中,使用class的值从zero到nine表示数字0-9的样式,使用.dot表示间隔符号。

digital-clock-map

 

<div?class="eight">?
????<span?class="d1"></span>?
????<span?class="d2"></span>?
????<span?class="d3"></span>?
????<span?class="d4"></span>?
????<span?class="d5"></span>?
????<span?class="d6"></span>?
????<span?class="d7"></span>?
</div>?

CSS3

我们设置每个数字span的透明度为0,就是默认不可见,通过CSS3的:before和:after特性来使表示数字的横杠设置转角的效果。

#clock?.digits?div{?
????text-align:left;?
????position:relative;?
????width:?28px;?
????height:50px;?
????display:inline-block;?
????margin:0?4px;?
}?
?
#clock?.digits?div?span{?
????opacity:0;?
????position:absolute;?
?
????-webkit-transition:0.25s;?
????-moz-transition:0.25s;?
????transition:0.25s;?
}?
?
#clock?.digits?div?span:before,?
#clock?.digits?div?span:after{?
????content:'';?
????position:absolute;?
????width:0;?
????height:0;?
????border:5px?solid?transparent;?
}?
?
#clock?.digits?.d1{????????????height:5px;width:16px;top:0;left:6px;}?
#clock?.digits?.d1:before{????border-width:0?5px?5px?0;border-right-color:inherit;left:-5px;}?
#clock?.digits?.d1:after{????border-width:0?0?5px?5px;border-left-color:inherit;right:-5px;}?

然后,我们将数字span元素对应的dl~d7,根据数字来确定哪根横杠显示或不显示,即设置其opacity的值为1。

/*?0?*/?
#clock?.digits?div.zero?.d1,?
#clock?.digits?div.zero?.d3,?
#clock?.digits?div.zero?.d4,?
#clock?.digits?div.zero?.d5,?
#clock?.digits?div.zero?.d6,?
#clock?.digits?div.zero?.d7{?
????opacity:1;?
}?

最后根据demo提供完整的css文档完善代码,即可以看到一个漂亮的数字时钟,那么如何让数字时钟真正跑起来,请看我们在下一篇文章的介绍:漂亮jQuery和CSS3制作数字时钟(jQuery篇)