zoukankan html css js c++ java

【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;
 50px;
 height:50px;
 background:#000;
 border-radius:10px;
 }
 #clock:before{
 content:" ";
 position:absolute;
 top:20px;
 left:20px;
 50px;
 height:50px;
 background:#0f0;
 border-radius:20px;
 }
 #clock:after{
 content:" ";
 position:absolute;
 top:40px;
 left:40px;
 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;
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{375px;height:375px;margin:auto;}
 #clockDial{/*--------底盘-------------*/
 position:absolute;z-index:100;
 401px;
 height:401px;
 background:#333;
 border-radius:100%;
 box-shadow:0 0 15px #000;
 -webkit-transform:scale(0.6);
 }
 /*--------底盘--纵横定位线(调试用）-----------*/
 /*#clockDial:before{
 content:" ";
 position:absolute;
 3px;left:202px;
 height:351px;top:26px;
 background:#0000ff;
 }
 #clockDial:after{
 content:" ";
 position:absolute;
 3px;left:202px;
 height:351px;top:26px;
 background:#0000ff;
 transform:rotate(90deg);
 }*/
 #clockDial:before{/*--------底盘--边框外阴影-----------*/
 content:" ";
 position:absolute;
 442px;left:-21px;
 height:442px;top:-21px;
 border-radius:100%;
 box-shadow:0 0 30px #000;*/
 }/**/
 #clockDial:after{/*--------底盘--边框-----------*/
 content:" ";
 position:absolute;
 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;
 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;
 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;
 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;
 343px;height:343px;
 background:#333;
 border-radius:100%;
 }
 #clockFace:before{/*--------12/6刻度-----------*/
 content:" ";
 display:block;position:absolute;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 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;
 150px;
 border:0px solid #cc3300;
 color:#fff;
 font-size:12px;
 opacity:0.6;
 }
 #face{z-index:8;
 position:absolute;
 left:80px;
 top:75px;
 250px;
 height:250px;
 border:0px solid #09c;
 background:#0099ff;
 border-radius:40px;
 border-radius:40px;
 opacity:0.1;
 }
 #face:before{content:" ";
 position:absolute;
 250px;
 height:250px;
 border:0px solid #00c;
 background:#0099ff;
 transform:rotate(60deg);
 border-radius:40px;
 -webkit-transform:rotate(60deg);
 }
 #face:after{content:" ";
 position:absolute;
 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

查看全文

相关阅读:
CodeForces Gym 100500A A. Poetry Challenge DFS
CDOJ 486 Good Morning 傻逼题
 CDOJ 483 Data Structure Problem DFS
CDOJ 482 Charitable Exchange bfs
CDOJ 481 Apparent Magnitude 水题
 Codeforces Gym 100637G G. #TheDress 暴力
 Gym 100637F F. The Pool for Lucky Ones 暴力
 Codeforces Gym 100637B B. Lunch 找规律
 Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
 TC SRM 663 div2 B AABB 逆推

原文地址：https://www.cnblogs.com/7qin/p/9703433.html