Membuat jam digital berdasarkan Jquery dan CSS3 dengan muat turun kod sumber (CSS3)_jquery

Saya akan tunjukkan kepada anda rendering dahulu. Rakan-rakan yang berminat boleh memuat turun kod sumber.

Demonstrasi Kesan Muat turun kod sumber

Jam digital boleh digunakan dalam beberapa kesan kira detik WEB, kesan jam penggera WEB dan APP WEB berdasarkan HTML5 Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS3 dan HTML untuk mencipta kesan jam digital yang sangat cantik tanpa menggunakan sebarang gambar.

HTML

Kami mula-mula menyediakan kawasan jam #jam pada halaman, dan meletakkan nombor untuk dipaparkan dalam .digit.

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

Format jam digital yang akan kami tunjukkan ialah HH:mm:ss Ia terdiri daripada 8 digit untuk jam, minit dan saat dan 2 pemisah ":". 8 terdiri daripada 7 Terdiri daripada bar mendatar pendek, kami menggunakan tujuh elemen rentang dari .d1 hingga .d7 dalam HTML untuk menentukan kesan paparan nombor yang berbeza melalui CSS. Tambahkan kod berikut pada .digit di atas, gunakan nilai kelas dari sifar hingga sembilan untuk mewakili gaya nombor 0-9 dan gunakan .dot untuk mewakili simbol selang.

<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

Kami menetapkan ketelusan setiap rentang nombor kepada 0, yang bermaksud ia tidak kelihatan secara lalai Kami menggunakan sifat :before dan :after CSS3 untuk menetapkan kesan sudut bar mendatar yang mewakili nombor.

#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; 
} 

Akhir sekali, dokumen css lengkap disediakan untuk menambah baik kod mengikut demo, dan anda boleh melihat jam digital yang cantik Jadi bagaimana untuk menjadikan jam digital benar-benar berjalan , sila lihat pengenalan kami di. artikel seterusnya.