51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

【CSS3】纯CSS代码实现模拟时钟,+js对时功能。

时间:2017-08-11 09:35点击:
使用CSS3纯代码来实现模拟时钟,及指针动画功能。
在这里主要使用到css3一些基本元素:
border-radius:圆角边框,画圆形;表盘
Transform:变换,旋转,扭曲;刻度盘,指针形状
Animation:时分秒指针转动。
:before/:after :伪元素


基本思路:

div id="clock" class="">  
<ul>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="kedu"></li>  
 <li class="shzi s3">3</li>  
 <li class="shzi s6">6</li>  
 <li class="shzi s9">9</li>  
 <li class="shzi s12">12</li>  
 <li class="hh"></li>  
 <li class="mm"></li>  
 <li class="ss"></li>  
 <li class="ms"></li>  
 <li class="biaopan"></li>  
 <li class="biaozhou"></li>  
 <li class="logo">♔</li>  
</ul>  
 </div>  


-----------------------
1.使用div+css画圆来定义时钟底盘,使用其伪类:before和:after,相当于增加两个容器,用于设计表盘轮廓或定位线;使用border-radius属性设计圆形。


    <!DOCTYPE html>  
    <html>  
     <head>  
      <title> new document </title>  
      <meta charset="utf-8" />  
      
      <style type="text/css">  
     #clock{  
     position:absolute;  
     width:50px;  
     height:50px;  
     background:#000;  
     border-radius:10px;  
     }  
     #clock:before{  
     content:" ";  
     position:absolute;  
     top:20px;  
     left:20px;  
     width:50px;  
     height:50px;  
     background:#0f0;  
     border-radius:20px;  
     }  
     #clock:after{  
     content:" ";  
     position:absolute;  
     top:40px;  
     left:40px;  
     width:50px;  
     height:50px;  
     background:#f0f;  
     border-radius:100%;  
     border-radius:25px;  
     }  
      
      </style>  
     </head>  
      
     <body>  
      <div id="clock" class="">  </div>  
     </body>  
    </html>  


2.使用li的block属性设计两端的边框来定义时钟的60个刻度。设置li的上下边框线使其成为2个刻度,使用li的伪类:before和:after,分别增加2个刻度;即时,1个li元素就可以定义3个层块6个刻度。所以,需要10个li来完成60十个刻度。

<style type="text/css">
 .Numerals{
 display:inline-block;
 width:3px;height:351px;
 top:11px;left:203px;
 border-top:15px solid #000;
 border-bottom:15px solid #000;
 }

  </style>
  <ul>
 <li class="Numerals"></li>
 <li></li>
  </ul>


然后通过旋转完成60个刻度。

3.定义指针:li为指针主体,li:before和li:after来定义指针头部和尾部(矩形变形为菱形transform:rotate(-45deg) skew(-30deg,-30deg);,矩形3角圆角为水滴型border-radius:100% 0 100% 100%;)

4.指针动画:定位好表轴位置(旋转点)transform-origin:2px 100%;然后设计秒针分针时针的旋转动画即可:秒针每秒跳一格6度,60秒360度;分针12秒跳一格6度,3600秒360度;时针可以设计为连续走、每秒跳或按格跳、按半格跳等。

.hourHand{ animation:anim_hr 43200s linear infinite; }
.minuteHand{ animation:anim_min 3600s  steps(60) infinite; }
.secondHand{ animation:anim_sec 60s steps(60) infinite; }

@keyframes anim_sec{
 from{transform:rotate(0deg) ;}
 to{ transform:rotate(360deg) ;}
}
@keyframes anim_min{
 to{ transform:rotate(360deg) ;}
}
@keyframes anim_hr{
 to{ transform:rotate(360deg) ;}
}


5.细节处理:表盘样式、logo、浏览器兼容性等。

6.效果图:


7.全部代码:

    <!DOCTYPE html>  
    <html >  
    <head>  
     <title>纯CSS模拟时钟+js对时。 </title>  
     <meta charset="utf-8" />  
     <meta name="description" content="纯css3代码时钟精彩案例" />  
     <meta name="keywords" content="WEB前端开发,HTML5,CSS3,jQuery," />  
     <meta name="author" content="R.tian @eduppp.cn 2015">  
     <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />   
     <meta name="apple-mobile-web-app-capable" content="yes" />    
     <meta name="apple-mobile-web-app-status-bar-style"  content="white" />    
     <meta content="telephone=no" name="format-detection" />   
     <link rel="shortcut icon" type="image/x-icon" href="/web/css/eduppp.ico" />  
     <link rel="shortcut icon" type="image/x-icon" href="/images/logo4.gif" />  
     <link rel="apple-touch-icon" href="/images/logo.gif" />  
     <link rel="apple-touch-icon" sizes="72x72" href="/images/logo.gif" />  
     <link rel="apple-touch-icon" sizes="114x114" href="/images/logo.gif" />  
    <style type="text/css">  
     #main{width:375px;height:375px;margin:auto;}  
     #clockDial{/*--------底盘-------------*/  
     position:absolute;z-index:100;  
     width:401px;  
     height:401px;  
     background:#333;  
     border-radius:100%;  
     box-shadow:0 0 15px #000;  
     -webkit-transform:scale(0.6);  
     }  
     /*--------底盘--纵横定位线(调试用)-----------*/  
     /*#clockDial:before{  
     content:" ";  
     position:absolute;  
     width:3px;left:202px;  
     height:351px;top:26px;  
     background:#0000ff;  
     }  
     #clockDial:after{  
     content:" ";  
     position:absolute;  
     width:3px;left:202px;  
     height:351px;top:26px;  
     background:#0000ff;  
     transform:rotate(90deg);  
     }*/  
     #clockDial:before{/*--------底盘--边框外阴影-----------*/  
     content:" ";  
     position:absolute;  
     width:442px;left:-21px;  
     height:442px;top:-21px;  
     border-radius:100%;  
     box-shadow:0 0 30px #000;*/  
     }/**/  
     #clockDial:after{/*--------底盘--边框-----------*/  
     content:" ";  
     position:absolute;  
     width:440px;left:-20px;  
     height:440px;top:-20px;  
     border-radius:100%;  
     box-shadow:0 0 20px 10px #003366 inset;  
     }/**/  
     .Numerals{display:inline-block;z-index:3;}  
     .Numerals{/*--------10个刻度线 * 两端----主标签-------*/  
     position:absolute;  
     width:3px;height:351px;  
     top:11px;left:203px;  
     border-top:15px solid #fff;  
     border-bottom:15px solid #fff;  
     box-shadow:0 0 10px 1px #0000ff;  
     transform-origin:50% 50%;   
     -webkit-transform-origin:50% 50%;   
     }  
     .Numerals:before{/*--------10个刻度线 * 两端----副标签-------*/  
     content:" ";   
     position:absolute;  
     width:3px;height:351px;  
     top:-15px;  
     border-top:15px solid #fff;  
     border-bottom:15px solid #fff;  
     transform:rotate(60deg);  
     -webkit-transform:rotate(60deg);  
     box-shadow:0 0 10px 1px #0000ff;  
     transform-origin:50% 50%;   
     -webkit-transform-origin:50% 50%;   
     }  
     .Numerals:after{/*--------10个刻度线 * 两端-----副标签------*/  
     content:" ";   
     position:absolute;  
     width:3px;height:351px;  
     top:-15px;left:0px;  
     border-top:15px solid #fff;  
     border-bottom:15px solid #fff;  
     border-left:0px;  
     border-right:0px;  
     transform:rotate(120deg);  
     -webkit-transform:rotate(120deg);  
     box-shadow:0 0 10px 1px #0000ff;  
     transform-origin:50% 50%;   
     -webkit-transform-origin:50% 50%;   
     }  
     /*--------10个刻度线 * 3线 * 两端 ---方位-----------*/  
     .Numerals:nth-child(2){  
     transform:rotate(6deg);-webkit-transform:rotate(6deg);    
     }  
     .Numerals:nth-child(3){  
     transform:rotate(12deg);-webkit-transform:rotate(12deg);   
     }  
     .Numerals:nth-child(4){transform:rotate(18deg);-webkit-transform:rotate(18deg); }  
     .Numerals:nth-child(5){transform:rotate(24deg);-webkit-transform:rotate(24deg); }  
     .Numerals:nth-child(6){transform:rotate(30deg);-webkit-transform:rotate(30deg); }  
     .Numerals:nth-child(7){transform:rotate(36deg);-webkit-transform:rotate(36deg); }  
     .Numerals:nth-child(8){transform:rotate(42deg); -webkit-transform:rotate(42deg); }  
     .Numerals:nth-child(9){transform:rotate(48deg); -webkit-transform:rotate(48deg); }  
     .Numerals:nth-child(10){transform:rotate(54deg);-webkit-transform:rotate(54deg); }  
     .Num{z-index:10;}  
     #clockFace{z-index:5;}  
     #pivot{z-index:11;}  
     #clockFace{/*--------表盘-----------*/  
     display:block;position:absolute;opacity:0.9;  
     top:30px;left:32px;  
     width:343px;height:343px;  
     background:#333;  
     border-radius:100%;  
     }  
     #clockFace:before{/*--------12/6刻度-----------*/  
     content:" ";  
     display:block;position:absolute;  
     width:7px;height:322px;left:50%;top:50%;  
     margin:-191px 0 0 -3px;  
     border-top:30px solid #fff;  
     border-bottom:30px solid #fff;  
     }  
     #clockFace:after{/*--------3/9刻度-----------*/  
     content:" ";  
     display:block;position:absolute;  
     width:7px;height:322px;left:50%;top:50%;  
     margin:-191px 0 0 -3px;  
     border-top:30px solid #fff;  
     border-bottom:30px solid #fff;  
     transform:rotate(90deg);  
     }  
     .Num{/*--------3、6、9、12数字位置-----------*/  
     z-index:9;  
     display:block;position:absolute;   
     left:50%;top:50%;font-size:22pt;color:#fff;  
     }  
     .num3{margin:-15px 0 0 150px}  
     .num6{margin:130px 0 0 -5px}  
     .num9{margin:-15px 0 0 -155px}  
     .num12{margin:-165px 0 0 -10px}  
     /*--------其他数字位置-----------*/  
     .num3:before{content:"1";font-size:16pt;  
     margin:-140px 0 0 -70px;display:block;position:absolute; }  
     .num3:after{content:"2";font-size:16pt;  
     margin:-110px 0 0 -10px;display:block;position:absolute; }  
     .num6:before{content:"4";font-size:16pt;  
     margin:-60px 0 0 145px;display:block;position:absolute; }  
     .num6:after{content:"5";font-size:16pt;  
     margin:-35px 0 0 85px;display:block;position:absolute; }  
     .num9:before{content:"7";font-size:16pt;  
     margin:145px 0 0 70px;display:block;position:absolute; }  
     .num9:after{content:"8";font-size:16pt;  
     margin:52px 0 0 12px;display:block;position:absolute; }  
     .num12:before{content:"10";font-size:16pt;  
     margin:70px 0 0 -140px;display:block;position:absolute; }  
     .num12:after{content:"11";font-size:16pt;  
     margin:-20px 0 0 -80px;display:block;position:absolute; }  
     /*--------表轴原点--------------------------------------------*/  
     #pivot {  
     z-index:90;  
     display:block;position:absolute; left:50%;top:50%;  
     margin:-5px 0 0 -2px;  
     width:11px;height:11px;  
     border-radius:5px;  
     background:#fff;  
     box-shadow:0 0 10px 1px #ff0 ;  
     }  
     /*----------------时针-------------------------------------------*/  
     #hourHand{/*--------时针:主线-----------*/  
     z-index:10;  
     display:block;position:absolute;   
     left:50%;top:50%;margin:-100px 0 0 0;  
     width:7px;height:136px;  
     background:#ff0; box-shadow:0 0 10px #000;  
     opacity:0.7;  
     transform-origin:50% 101px;  
     -webkit-transform-origin:50% 101px;  
     }  
     #hourHand:after{/*--------时针:头-----------*/  
     content:" ";display:block;position:absolute; left:3px;top:-10px;  
     width:20px;height:20px;  
     border-radius:0px 0;  
     transform-origin:0 100%;  
     -webkit-transform-origin:0 100%;  
     transform:rotate(-45deg) skew(-20deg,-20deg);  
     -webkit-transform:rotate(-45deg) skew(-20deg,-20deg);  
     background:#ff0;  
     }  
     #hourHand:before{/*--------时针:尾-----------*/  
     content:" ";display:block;position:absolute; left:2px;top:120px;  
     width:20px;height:20px;  
     border-radius:100% 0 100% 100%;  
     transform-origin:4px 100%;  
     -webkit-transform-origin:4px 100%;  
     transform:rotate(-45deg) ;  
     -webkit-transform:rotate(-45deg) ;  
     background:#ff0;box-shadow:0 0 10px #000;  
     }  
     /*---------------分针--------------------------------------------*/  
     #minuteHand{/*--------分针:主线-----------*/  
     z-index:10;  
     display:block;position:absolute;   
     left:50%;top:50%;margin:-120px 0 0 1px;  
     width:5px;height:156px;  
     background:#0f0; box-shadow:0 0 10px #000;  
     opacity:0.6;  
     transform-origin:50% 121px;  
     -webkit-transform-origin:50% 121px;  
     }  
     #minuteHand:after{/*--------分针:头-----------*/  
     content:" ";display:block;position:absolute; left:2px;top:-10px;  
     width:20px;height:20px;  
     border-radius:0px 0;  
     transform-origin:0 100%;  
     -webkit-transform-origin:0 100%;  
     transform:rotate(-45deg) skew(-30deg,-30deg);  
     -webkit-transform:rotate(-45deg) skew(-30deg,-30deg);  
     background:#0f0;  
     }  
     #minuteHand:before{/*--------分针:尾-----------*/  
     content:" ";display:block;position:absolute; left:2px;top:150px;  
     width:20px;height:20px;  
     border-radius:100% 0 100% 100%;  
     transform-origin:2px 100%;  
     -webkit-transform-origin:2px 100%;  
     transform:rotate(-45deg) ;  
     -webkit-transform:rotate(-45deg) ;  
     background:#0f0;box-shadow:0 0 10px #000;  
     }  
     /*-----------------秒针------------------------------------------*/  
     #secondHand{/*--------秒针:主线-----------*/  
     z-index:10;  
     display:block;position:absolute;   
     left:50%;top:50%;margin:-140px 0 0 2px;  
     width:3px;height:176px;  
     background:#f00; box-shadow:0 0 10px #000;  
     opacity:0.7;  
     transform-origin:50% 141px;  
     -webkit-transform-origin:50% 141px;  
     }  
     #secondHand:after{/*--------秒针:头-----------*/  
     content:" ";display:block;position:absolute; left:2px;top:-10px;  
     width:30px;height:30px;  
     border-radius:5px 0;  
     transform-origin:0 100%;  
     -webkit-transform-origin:0 100%;  
     transform:rotate(-45deg) skew(-30deg,-30deg);  
     -webkit-transform:rotate(-45deg) skew(-30deg,-30deg);  
     background:#f00;  
     }  
     #secondHand:before{/*--------秒针:尾-----------*/  
     content:" ";display:block;position:absolute; left:1px;top:180px;  
     width:20px;height:20px;  
     border-radius:100% 0 100% 100%;  
     transform-origin:2px 100%;  
     -webkit-transform-origin:2px 100%;  
     transform:rotate(-45deg) ;  
     -webkit-transform:rotate(-45deg) ;  
     background:#f00;box-shadow:0 0 10px #000;  
     }  
     /*--------动画:指针----(使用JavaScript脚本対时)-----------------------------------*/  
     /*   
     #hourHand{ animation:anim_hr 43200s linear infinite; }  
     #minuteHand{ animation:anim_min 3600s  steps(60) infinite; }  
     #secondHand{ animation:anim_sec 60s steps(60) infinite; }  
     @keyframes anim_sec{  
      from{transform:rotate(0deg) ;}  
      to{ transform:rotate(360deg) ;}  
     }  
     @keyframes anim_min{  
      to{ transform:rotate(360deg) ;}  
     }  
     @keyframes anim_hr{  
      to{ transform:rotate(360deg) ;}  
     }  
     */  
     /*-----------------------------------------------------------*/  
     #millisecond{/*--------毫秒小盘-----------*/  
     z-index:9;  
     display:block;position:absolute;  
     left:50%;left:50%;  
     margin:220px 0 0 -38px;  
     width:80px;height:80px;  
     border:1px dashed #fff;  
     border-radius:100%;  
     background:#555;  
     opacity:0.3;  
     box-shadow:0 0 10px 1px #fff inset;  
     }  
     #millisecond:after{/*--------毫秒:指针----------*/  
     content:" ";  
     display:block;position:absolute;  
     margin:4px 0 0 37px;  
     width:3px;height:35px;  
     border:1px dashed #990099;  
     background:#9900cc;  
     border-radius:100%;  
     opacity:1.5;  
     }  
     #millisecond:after{/*--------毫秒:动画----------*/  
     transform-origin:50% 35px;  
     -webkit-transform-origin:50% 35px;  
     animation:anim_l 1s linear infinite;   
     -webkit-animation:anim_l 1s linear infinite;   
     }  
     @keyframes anim_l{  
      from{ transform:rotate(0deg) ; -webkit-transform:rotate(0deg) ;}  
      to{ transform:rotate(360deg) ; -webkit-transform:rotate(360deg) ;}  
     }  
     /*-----------------------------------------------------------*/  
     #logo{  
     position:absolute;z-index:8;  
     left:191px;top:80px;  
     display:inline;  
     color:#fff;  
     font-size:25px;  
     opacity:1;  
     }  
     #logo:before{  
     content:"eduppp.cn";  
     display:block;position:absolute;font-family:"方正舒体" ;  
     left:50%;top:50%;margin:5px 0 0 -38px;  
     color:#fff;  
     opacity:0.8;  
     font-size:20px;  
     }  
     #logo:after{  
     content:"Copyright @R.tian 2015";  
     display:block;position:absolute;  
     margin:210px 0 0 -45px;  
     width:150px;  
     border:0px solid #cc3300;  
     color:#fff;  
     font-size:12px;  
     opacity:0.6;  
     }  
     #face{z-index:8;  
     position:absolute;  
     left:80px;  
     top:75px;  
     width:250px;  
     height:250px;  
     border:0px solid #09c;  
     background:#0099ff;  
     border-radius:40px;  
     border-radius:40px;  
     opacity:0.1;  
     }  
     #face:before{content:" ";  
     position:absolute;  
     width:250px;  
     height:250px;  
     border:0px solid #00c;  
     background:#0099ff;  
     transform:rotate(60deg);  
     border-radius:40px;  
     -webkit-transform:rotate(60deg);  
     }  
     #face:after{content:" ";  
     position:absolute;  
     width:250px;  
     height:250px;  
     border:0px solid #a9c;  
     background:#0099ff;  
     border-radius:40px;  
     transform:rotate(120deg);  
     -webkit-transform:rotate(120deg);  
     }  
    </style>  
    <script type="text/javascript">  
     //----使用Js控制动画时间,每秒对三个指针定位。  
     //----CSS3的动画animation,使用js对时后无法达到三个指针同步(0秒时,三针同时旋转)。  
     /**/  
     window.onload=function() {//当文档加载完成时执行该代码。  
      var clock = new Clock();  
      clock.start();  
     };  
     function Clock() {  
      var d = new Date();   
      var h = d.getHours() % 12;  
      var m = d.getMinutes();  
      var s = d.getSeconds();  
      this.start = function() {  
       var clock = new Clock();  
       document.getElementById("secondHand").style.webkitTransform="rotate("+s*6+"deg)";  
       document.getElementById("minuteHand").style.webkitTransform="rotate("+m*6+"deg)";  
       document.getElementById("hourHand").style.webkitTransform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";  
       document.getElementById("secondHand").style.transform="rotate("+s*6+"deg)";  
       document.getElementById("minuteHand").style.transform="rotate("+m*6+"deg)";  
       document.getElementById("hourHand").style.transform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";  
       window.setTimeout(function() {clock.start();}, 500);  
      };  
     }  
    </script>  
    </head>  
    <body>  
    <div id="main" class="">  
      <div id="clockDial" class="">  
     <ul>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Numerals"></li>  
      <li class="Num num3">3</li>  
      <li class="Num num6">6</li>  
      <li class="Num num9">9</li>  
      <li class="Num num12">12</li>  
      <li id="hourHand"></li>  
      <li id="minuteHand"></li>  
      <li id="secondHand"></li>  
      <li id="millisecond"></li>  
      <li id="clockFace"></li>  
      <li id="logo">♔</li>  
      <li id="pivot"></li>  
      <li id="face"></li>  
     </ul>  
      </div>  
     </div>  
     </body>  
    </html>  

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开