html 时钟怎样居中,怎么用css3做时钟刻度

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

html代码布局：

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答疑栏目进行学习！