Based on jquery and CSS3 production of digital clock source download (CSS3 article) _jquery

First to show you the effect map, interested friends can download the source Oh.

Effect Demo Source Download

Digital clocks can be applied to some Web countdown effects, Web alarm effects, and web-based apps based on HTML5, and this article will show you how to use CSS3 and HTML to make a very nice digital clock effect without any pictures.

Html

We first prepare a clock area #clock in the page, and the number to display is placed in the. digits.

<div id= "Clock" class= "Light" > 
 <div class= "display" > 
  <div class= "digits" > 
   ... Digital 
  </div> 
 </div> 

We are ready to show the digital clock format HH:mm:ss, which consists of 8 digits per minute and 2 delimiters ":", the number consists of 7 short bars, such as the number 8 it consists of 7 short bars, which we use in HTML. D1~.d7 seven span elements, Through the CSS to determine the different number of display effects. Add the following code to the above. Digits, using the value of class to represent the style of number 0-9 from zero to nine, using. Dot to denote the interval symbol.

<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> 

CSS3

We set the transparency of each digital span to 0, which is not visible by default, through the CSS3: Before and: After features to make the horizontal bar that represents the number to set the rotation effect.

 #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;}
Then, we dl~d7 the number span element, according to the number to determine which bar to show or not display, that is, set its opacity value is 1.  /* 0/#clock. Digits div.zero d1, #clock. Digits Div.zero D3, #clock. Digits Div.zero. d4, #clock. Digits 
. d5, #clock. Digits Div.zero d6, #clock. Digits div.zero. d7{opacity:1; } 

Finally, according to the demo to provide complete CSS document perfect code, that can see a beautiful digital clock, then how to let the digital clock really run up, please see our next article Introduction.