Create a digital clock source code download (CSS3) based on Jquery and CSS3, and jquerycss3

Create a digital clock source code download (CSS3) based on Jquery and CSS3, and jquerycss3

Let's show you how to download the source code for interested friends.

Download demo source code

The digital clock can be applied to some WEB countdown effects, WEB alarm clock effects, and HTML5-based WEB apps. This article will introduce you without any image, how to Use CSS3 and HTML to create a very beautiful digital clock effect.

HTML

We first prepare a clock area # clock on the page, and place the number to be displayed in. digits.

<Div id = "clock" class = "light"> <div class = "display"> <div class = "digits">... number </div>

The digital clock format HH: mm: ss we are going to display is composed of eight digits and two delimiters ":". The number is composed of seven short bars, for example, the number 8 consists of seven horizontal bars, which are used in html. d1 ~. D7 seven span elements are used to determine the Display Effect of Different numbers through CSS. Add the following code to the preceding. digits, use the class value from zero to nine to represent the 0-9 numeric style, and use. dot to represent the delimiter.

<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 the transparency of each number span to 0, that is, it is invisible by default. We use the before and after features of CSS3 to set the effect of the rotation angle for the horizontal bar representing the number.

# 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.25 s;-moz-transition: 0.25 s; transition: 0.25 s;} # clock. digits div span: before, # clock. digits div span: after {content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent;} # clock. digi Ts. 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 convert the dl ~ D7: Determine which horizontal bar is displayed or not displayed based on the number, that is, set its opacity value to 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 the complete css document provided by the demo, we can see a beautiful digital clock. For how to make the digital clock really run, please refer to our introduction in the next article.