QQ登录 - 设为首页 - 加入收藏 - 网站地图 木易瓶子屋!第一时间了解互联网开发技术新鲜事儿!

亲!来点一下试试嘛。。。

木易瓶子屋每日新鲜技术平台 第一时间了解互联网的那些事儿

使用jQuery和CSS3制作数字时钟(CSS3篇)

作者:木易瓶子┆ 分类:服务器技术┆时间:2015-02-12┆点击: 127次┆tags: jQueryCSS3制作数字时钟

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

HTML

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

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

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

  <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

我们设置每个数字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; 
} 

欢迎转载但请注明出处及链接,商业媒体使用请联系编辑(QQ 363630845)。
jQuery,CSS3,制作,数字时钟
上一篇:W3m使用详解
下一篇:ThinkPHP模块化设计
正在加载中……