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

一时失言乱红尘 2022-08-08 17:48 181阅读 0赞

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

基本思路：

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

![Center][]  
图1.使用伪元素将一个div变为三个可用的容器。

<!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.效果图：

![1443006699_5966.gif][]

7.全部代码：/\*---------------20150915---------------\*/

<!DOCTYPE html>
    <html >
    <head>
     <title> 飛天网事-纯CSS模拟时钟+js对时。 </title>
     <meta charset="utf-8" />
     <meta name="description" content="飛天网事，WEB前端开发，纯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.οnlοad=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>

[Center]: /images/20220731/d3bf7a61bdec4be29c8e13a1580ee6fe.png
[1443006699_5966.gif]: https://img-my.csdn.net/uploads/201509/23/1443006699_5966.gif