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

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

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

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

Animation：时分秒指针转动。

:before/:after :伪元素

基本思路：

     
 
      
  
       
  
       
  
       
  
       
  
       
  
       
  
       
  
       
  
       
  
       
  
       
3
  
       
6
  
       
9
  
       
12
  
       
  
       
  
       
  
       
  
       
  
       
  
       
♔
 
      
  
     

-----------------------

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

 

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

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

  
      
      
      
      
       
        
        
       
      
      
      
      
     
     
  
      
 
       
  
        
  
        
  
        
  
        
  
        
  
        
  
        
  
        
  
        
  
        
  
        
3
  
        
6
  
        
9
  
        
12
  
        
  
        
  
        
  
        
  
        
  
        
♔
  
        
  
        
 
       
  
      
 
     
 

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