先给你看效果图。感兴趣的朋友可以下载源代码。

下载效果演示源代码。

数字钟可以用在一些WEB倒计时效果、WEB闹钟效果和基于HTML5的WEB APP中。本文将介绍如何使用CSS3和HTML制作出没有任何图片的精美数字钟效果。

超文本标记语言

我们首先在页面中准备一个时钟区#clock，并把要显示的数字放进去。数字。

div id=' clock ' class=' light ' div class=' display ' div class=' digits '.Numbers /div /div /div我们要展示的数字钟格式是HH:mm:ss，由8个小时、分钟、秒的数字和2个分隔符“:”组成。数字是由七个短小节组成的，比如数字8就是由七个短小节组成的。我们在html中使用了从. d1到. d7的七个span元素，通过CSS确定不同数字的显示效果。在上面添加以下代码。数字，使用从零到九的class值来表示数字0-9的模式，并使用。点代表间隔符号。

div class='八' 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

我们将每个数字跨度的透明度设置为0，即默认情况下是不可见的。通过CSS3的：before和：after特性，代表数字的横条可以设置转角效果。

#时钟。digits div { text-align : left；位置：相对；宽度： 28px；高度：50 px；display : inline-block；margin:0 4px} #时钟。digits div span { opacity:0位置：绝对；-web kit-transit :0.25s；-moz-transit :0.25s；transition:0.25s} #时钟。#clock之前的数字div span:before。{ content : }后的数字div span:after位置：绝对；宽度：0；高度：0；border:5px固体透明；} #时钟。数字. d1 { height:5px宽度：16 px；top:0left:6px} #时钟。{边框宽度：0 5px 5px 0 }前的数字. width:0边框-右侧-颜色color:inheritleft :-5px；} #时钟。{ border-width :0 0 5px 5px }后的数字. width:0border-left-color : inherit；right :-5px；}然后，我们会根据span元素对应的数字dl~d7来决定显示还是不显示哪个横条，也就是将其不透明度值设置为1。/* 0 */#时钟。数字div.zero .d1，#clock。数字div.zero .d3，#clock。数字div.zero .d4，#clock。数字div.zero .d5，#clock。数字div.zero .d6，#clock。digits div . zero . D7 { opa city 33601；}最后根据演示，提供完整的css文档来完善代码，也就是可以看到一个漂亮的数字钟。那么，请看我们在下一篇文章中关于如何让数字钟真正运行的介绍。