效果演示源代码下载
数字时钟可以应用于一些网络倒计时效应、基于Web的闹钟效果和基于HTML5的web应用程序。本文将向您介绍如何在不使用任何图片做的非常漂亮的数字时钟和如何使用CSS3和HTML。
HTML
我们先准备一个时钟区域#时钟页面将显示在the.digits数。
…数
我们来显示数字时钟格式HH:毫米：SS，由每小时8个数字和2隔板组成，图形是由7个短棒，如8号由7个短棒，~。D1。D7采用七跨元素在HTML，CSS来确定显示效果不同的单词的数目。将下面的代码添加到以上数字，使用类的值表示数字0-9的风格从零到九，用点来表示间隔符号。
CSS3
我们将每个数字跨度的透明度设置为0，也就是说，默认值是不可见的。我们使用CSS3的之前和之后的特点设置的水平杆数设置的角落。
# clock.digits div {
文本对齐：左对齐；
职位：相对；
宽度：28px；
身高：50px；
显示：内联块；
保证金：0 4px；
}
# clock.digits div跨度{
不透明性：0；
位置：绝对；
WebKit的过渡：0.25s；
过渡：0.25s -moz；
过渡：0.25s；
}
# clock.digits div跨度：前，
# clock.digits div跨度：后{
内容；
位置：绝对；
宽度：0；
身高：0；
边境：5px固体透明；
}
#时钟。数字。D1 {身高：5px；宽度：16px；最高：0；左：6px；}
#时钟。数字。D1：在{边框宽度：0 5px 5px 0；边界颜色：继承；左：- 5px；}
#时钟。数字。D1：后{边框宽度：0 0 5px 5px；左边框颜色：继承；右：- 5px；}
然后，我们对应的数字跨度元DL ~ D7，这决定了它的水平栏显示或不显示根据人数，即其不透明度值设置为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 {。
不透明性：1；
}
最后，根据演示，我们提供了一个完整的CSS文档来完善代码，也就是说，我们可以看到一个漂亮的数字钟。让我们看看如何运行数字时钟。让我们在下一篇文章中看看我们的演讲。
