基於Jquery和CSS3製作數位時鐘附源碼下載(CSS3篇)

基於Jquery和CSS3製作數位時鐘附源碼下載(CSS3篇)_jquery

WBOY

發布： 2016-05-16 15:30:14

原創

1175 人瀏覽過

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

效果示範原始碼下載

數位時鐘可以應用在一些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文檔完善程式碼，即可以看到一個漂亮的數字時鐘，那麼如何讓數字時鐘真正跑起來，請看我們在下一篇文章的介紹。