怎么用css3做时钟刻度

首先要明确，表盘一周是360°并有60个小刻度。也就是每个刻度从0°（12点位置）开始递加6°。拿其中5个刻度为例，代码如下：

html代码布局：

<ul id="ul1">    
    <li></li>   
    <li></li>   
    <li></li>   
    <li></li> 
    <li></li>
</ul>

css样式表：（相关课程推荐：css视频教程）

/* 清除默认样式 */
*{margin: 0;padding: 0}
li{list-style: none}
/* 将表盘设置成半径为100px的原型，并为其加上边框 */
#ul1{   
   width: 200px;height: 200px; 
   border: 1px solid #000; 
   border-radius: 50   
   position: relative;
}
/* 设置每个刻度的宽高，这里用定位将他们都定在表盘12点（0°）的位置，也就是ul1的宽度的一半。
并设置它们的选择奇点（ -webkit-transform-origin: 0 100px），围绕着ul1的中心分布，
也就是ul1高度的一半 */
li{   
   width: 2px;height: 6px;  
   background: black;  
   position:absolute;   
   left:100px;top:0;  
   -webkit-transform-origin: 0 100px;
}
/* 这里利用css3的子元素选择器（因为本人懒，不想命名class），设置5个刻度的位置 */
li:nth-child(1){ -webkit-transform: rotate(0deg);}
li:nth-child(2){ -webkit-transform: rotate(6deg);}
li:nth-child(3){ -webkit-transform: rotate(12deg);}
li:nth-child(4){ -webkit-transform: rotate(18deg);}
li:nth-child(5){ -webkit-transform: rotate(24deg);}

效果如下：

这里就简单的将5个刻度设置好了，是不是很简单呢！

接下来咱们就用js代码动态创建。

/* 先获取表盘ul1 */
var oUl = document.getElementById('ul1');
/* 因为是60个刻度嘛，我们就创建60个li，并设置它们的旋转角度 */
for (var i=0;i<60;i++){   
   var oLi = document.createElement('li');   
    /* 因为i是从0~60，而每个刻度的旋转角度360°÷60=6°，所以每个刻度的旋转角度就是i*6°  */
   oLi.style.webkitTransform = 'rotate('+ i*6 +'deg)'; 
   oUl.appendChild(oLi);
}

另：是不是每5个就有一个与众不同的li。所以这里就在css中设置每隔5n个设置一下，代码如下：

li:nth-of-type(5n){
  height: 14px;
  width: 5px;
}

创建好的效果如下：

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是怎么用css3做时钟刻度的详细内容，更多请关注易知道|edz.cc其它相关文章！