css画钟表_用CSS3实现钟表效果

背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。

效果图

实现过程

1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。

#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border- radius:50%; position:relative;}

2.接下来我们用ul和li来写表盘中的刻度，对其进行简单的样式设置。其中需要注意的是，我们用 -webkit-transform-origin:center 100px;来设置我们的旋转基点。然后利用 -webkit-transform: rotate(0);让我们的li旋转相应的角度形成相应的刻度。

#wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}

#wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}

#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}

#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}

#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}

#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}

#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}

#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}

#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}

#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}