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

使用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属性设计圆形。

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

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

--------------------- 本文来自 rtian001 的CSDN 博客，全文地址请点击：https://blog.csdn.net/rtian001/article/details/48684247?utm_source=copy

posted @ 2018-09-25 20:51 笠航阅读(1207) 评论(0) 编辑收藏举报

刷新页面返回顶部

笠航

懂的越多，不会的也就越多，知识之路是不断进取的。。。

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

公告