css代码模拟时钟 +js对时

本是古典何须时尚 2022-08-08 16:39 159阅读 0赞

使用CSS3纯代码来实现模拟时钟，及指针动画功能。

在这里主要使用到css3一些基本元素：

border-radius：圆角边框，画圆形；表盘

Transform：变换，旋转，扭曲；刻度盘，指针形状

Animation：时分秒指针转动。

:before/:after :伪元素

基本思路：

<ul>

<liclass="kedu"></li>

<liclass="shzi s3">3</li>

<liclass="shzi s6">6</li>

<liclass="shzi s9">9</li>

<liclass="shzi s12">12</li>

<liclass="hh"></li>

<liclass="mm"></li>

<liclass="ss"></li>

<liclass="ms"></li>

<liclass="biaopan"></li>

<liclass="biaozhou"></li>

</ul>

</div>

\-----------------------

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

![Image 1][]

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

<!DOCTYPEhtml>

<html>

<head>

<title> new document </title>

\#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>

</body>

</html>

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

.Numerals\{

display:inline-block;

width:3px;height:351px;

top:11px;left:203px;

border-top:15pxsolid \#000;

border-bottom:15pxsolid \#000;

</style>

<ul>

<liclass="Numerals"></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\_hr43200s linear infinite;        \}

.minuteHand\{        animation:anim\_min3600s  steps(60)infinite;        \}

.secondHand\{        animation:anim\_sec60s 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.****效果图：**

![Image 1][]

**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>

[Image 1]: