基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)_Javascript教程-查字典教程网
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
发布时间:2016-12-30 来源:查字典编辑
摘要:先给大家展示效果图,感兴趣的朋友可以下载源码哦。效果演示源码下载数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的W...

先给大家展示效果图,感兴趣的朋友可以下载源码哦。

效果演示 源码下载

数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。

HTML

我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中。

<div id="clock"> <div> <div> ...数字 </div> </div> </div>

我们准备展示的数字时钟格式HH:mm:ss,它由时分秒8个数字和2个分隔符“:”组成,数字是由7个短横杠组成,如数字8它由7个短横杠构成,我们在html里使用.d1~.d7七个span元素,通过CSS的来确定不同数字的显示效果。将以下代码加到上述.digits中,使用class的值从zero到nine表示数字0-9的样式,使用.dot表示间隔符号。

<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>

CSS3

我们设置每个数字span的透明度为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; }

最后根据demo提供完整的css文档完善代码,即可以看到一个漂亮的数字时钟,那么如何让数字时钟真正跑起来,请看我们在下一篇文章的介绍。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类