快捷導(dǎo)航

基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)

更新時(shí)間：2015年11月24日 14:49:33 投稿：mrr

數(shù)字時(shí)鐘在web倒計(jì)時(shí)，web鬧鐘效果以及基于html5的web app中，本文給大家介紹基于jquery和css3制作數(shù)字時(shí)鐘附源碼下載，感興趣的朋友來(lái)看看吧

先給大家展示效果圖，感興趣的朋友可以下載源碼哦。

數(shù)字時(shí)鐘可以應(yīng)用在一些WEB倒計(jì)時(shí)效果、WEB鬧鐘效果以及基于HTML5的WEB APP中，本文將給大家介紹不借助任何圖片，如何使用CSS3和HTML來(lái)制作一個(gè)非常漂亮的數(shù)字時(shí)鐘效果。

HTML

我們先在頁(yè)面中準(zhǔn)備一個(gè)時(shí)鐘區(qū)域#clock，并且要展示的數(shù)字放在.digits中。

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="digits"> 
   ...數(shù)字 
  </div> 
 </div> 
</div>

我們準(zhǔn)備展示的數(shù)字時(shí)鐘格式HH:mm:ss，它由時(shí)分秒8個(gè)數(shù)字和2個(gè)分隔符“:”組成，數(shù)字是由7個(gè)短橫杠組成，如數(shù)字8它由7個(gè)短橫杠構(gòu)成，我們?cè)趆tml里使用.d1~.d7七個(gè)span元素，通過(guò)CSS的來(lái)確定不同數(shù)字的顯示效果。將以下代碼加到上述.digits中，使用class的值從zero到nine表示數(shù)字0-9的樣式，使用.dot表示間隔符號(hào)。

<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

我們?cè)O(shè)置每個(gè)數(shù)字span的透明度為0，就是默認(rèn)不可見(jiàn)，通過(guò)CSS3的:before和:after特性來(lái)使表示數(shù)字的橫杠設(shè)置轉(zhuǎn)角的效果。

#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;} 
然后，我們將數(shù)字span元素對(duì)應(yīng)的dl~d7，根據(jù)數(shù)字來(lái)確定哪根橫杠顯示或不顯示，即設(shè)置其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; 
}

最后根據(jù)demo提供完整的css文檔完善代碼，即可以看到一個(gè)漂亮的數(shù)字時(shí)鐘，那么如何讓數(shù)字時(shí)鐘真正跑起來(lái)，請(qǐng)看我們?cè)谙乱黄恼碌慕榻B。

您可能感興趣的文章: