先給大家展示效果圖，感興趣的朋友可以下載源碼哦。
數字時鐘可以應用在一些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表示間隔符號。
<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文檔完善代碼，即可以看到一個漂亮的數字時鐘，那么如何讓數字時鐘真正跑起來，請看我們在下一篇文章的介紹。
新聞熱點
疑難解答
