用CSS3实现钟表效果

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

效果图

实现过程

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

        <div id="wrap">#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">
 
#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 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！