» » Use jQuery and CSS3 to create digital clock (CSS3 part)

 

Use jQuery and CSS3 to create digital clock (CSS3 part)

Author: bamboo06 on 25-10-2014, 06:39, views: 4377

0
Digital clock countdown can be applied in some effect WEB, WEB Alarm effects and HTML5-based WEB APP, the article will introduce without the aid of any pictures, showing how to use CSS3 and HTML to create a very nice digital clock effect.


HTML
We first prepare a clock region #clock on the page, and put the figures you want to show on .digits.
<div id="clock" class="light"> 
    <div class="display"> 
        <div class="digits"> 
            ...digits
        </div> 
    </div> 
</div> 

We are ready to show the digital clock format HH: mm: ss, which consists of eight minutes and seconds and two digital delimiter ":" composed figure is composed by seven short bars, such as the number 8 which consists of seven short bars form, we use .d1 ~ .d7 seven in the span element in html to determine the effect of different digital display through the CSS. The following code is added to the .digits, use the value of the class represented 0-9 style from zero to nine, using .dot said interval symbols.
Use jQuery and CSS3 to create digital clock (CSS3 part)
<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
We set each digit span of transparency is 0, that is not visible by default, by the CSS3: before and: after setting features to make the bars represent numbers of corner effects.
#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 will figure corresponds to the span element dl ~ d7, according to figures to determine which bars the display or not display the root, that set its opacity value of 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; 
} 

Finally, according to demo provides complete documentation improvement css code, which you can see a beautiful digital clock, then how to make digital clock really run up, we see the introduction of the next article.

Category: Javascript / CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
Information
Comment on the news site is possible only within (days) days from the date of publication.