JqueryとCSS3をベースにしたデジタル時計をソースコードダウンロードで作る(CSS3)_jquery

最初にレンダリングをお見せしますので、興味のある方はソースコードをダウンロードしてください。

効果デモ ソースコードダウンロード

デジタル時計は、一部の WEB カウントダウン エフェクト、WEB 目覚まし時計エフェクト、HTML5 ベースの WEB アプリに適用できます。この記事では、CSS3 と HTML を使用して、画像を使用せずに非常に美しいデジタル時計エフェクトを作成する方法を紹介します。

HTML

まずページ上に時計領域#クロックを用意し、.digitsに表示したい数字を入れます。

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="digits"> 
   ...数字 
  </div> 
 </div> 
</div> 

これから説明するデジタル時計の形式は、時、分、秒の 8 桁と 2 つの区切り文字「:」で構成されます。たとえば、数字は 7 個のダッシュで構成されます。 8 は 7 つの短い水平バーで構成されており、HTML の .d1 から .d7 までの 7 つのスパン要素を使用して、CSS を通じてさまざまな数値の表示効果を決定します。次のコードを上記の .digits に追加し、0 ～ 9 のクラスの値を使用して 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

各数値範囲の透明度を 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; 
} 

最後に、デモに従ってコードを改善するための完全な CSS ドキュメントが提供され、美しいデジタル時計が表示されます。実際にデジタル時計を実行する方法 の紹介を参照してください。次の記事。