秒针

原文: jquery版时钟（css3实现） 　　做时钟的主要原因是因为喜欢，觉得它好看（本人对特效有点爱不释手……）。做的时候感觉工程量会有点大，做着做着发现实现起来其实并不难，只要理清思绪，其实还蛮简单的（我制作东西喜欢整体方向制定好，然后边做边找感觉，最后可能会有不一样的惊喜）。 　　我这里采用了时钟的背景图片，第一我觉得图片好看，第二我觉得应该先实现主要的功能再考虑画图（总归来说就是有点懒，哈哈~）。好了，废话不多说啦，进入正题。 　　 一、图片演示 　　 　　 二、html代码 <div class="box"> <div class="clock"> <!-- 时钟背景图 --> <div class="second-hand"></div> <!-- 秒针 --> <div class="minute-hand"></div> <!-- 分针 --> <div class="hour-hand"></div> <!-- 时针 --> </div> </div> 　　 三、css代码 .box {margin: 10px auto; width: 894px; height: 863px;} .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png")

　　做时钟的主要原因是因为喜欢，觉得它好看（本人对特效有点爱不释手……）。做的时候感觉工程量会有点大，做着做着发现实现起来其实并不难，只要理清思绪，其实还蛮简单的（我制作东西喜欢整体方向制定好，然后边做边找感觉，最后可能会有不一样的惊喜）。 　　我这里采用了时钟的背景图片，第一我觉得图片好看，第二我觉得应该先实现主要的功能再考虑画图（总归来说就是有点懒，哈哈~）。好了，废话不多说啦，进入正题。 　　 一、图片演示 　　 　　 二、html代码 <div class="box"> <div class="clock"> <!-- 时钟背景图 --> <div class="second-hand"></div> <!-- 秒针 --> <div class="minute-hand"></div> <!-- 分针 --> <div class="hour-hand"></div> <!-- 时针 --> </div> </div> 　　 三、css代码 .box {margin: 10px auto; width: 894px; height: 863px;} .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png") no-repeat;} .second

背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用 border-radius 属性将其设置成圆形。 <div id="wrap"></div> #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旋转相应的角度形成相应的刻度。 <ul id="list"> <li></li> <!--刻度--> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative