用CSS3实现钟表效果
背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。
效果图
1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。
<div></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> <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; 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);} #wrap ul li:nth-of-type(5n+1){ height:12px;}3.其中我们设计到了css3的选择器nth-of-type() ，它规定其属于其父元素的第几个li元素。
当然，我们不可能将表盘的刻度都统统去设置li的样式去完成。我们后面需要用js去渲染它。
在渲染之前，我们需要去写上我们的秒针、分针、时针。分别是div hour、min、sec，并且我们对其进行样式的设置。为了美化一下，我们再写一个div icon，圆点。并对其进行简单样式设置。
4.接下来我们来写一下让钟表动起来的JavaScript，，首先用js去获取各个div。
var oList=document.getElementById("list");//获取到刻度 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//获取时针 var oMin=document.getElementById("min");//获取分针 var oSec=document.getElementById("sec");//获取秒针 var oLi=""; var sCss="";5.接下来去渲染表盘的刻度。
for (var i=0;i<60;i++) { //一个表盘总共是60个刻度 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}"; oLi+="<li></li>"; }; oList.innerHTML=oLi; oCss.innerHTML+=sCss;//表盘刻度渲染完成6.接下来我们去写一个钟表表针根据时间变动的函数，先利用new Date（）获取时间，然后通过去改变表针的样式去让表针根据时间去转动，秒针一秒相当于旋转6度，分钟一秒相当转动6度，时针转动1秒相当于转动30度。
function toTime(){ var oDate=new Date();//获取当前时间 var iSec=oDate.getSeconds();//获取当前秒 var iMin=oDate.getMinutes()+iSec/60;//获取当前分 var iHour=oDate.getHours()+iMin/60;//获取当前时 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度) oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度) oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度) };7.最后我们来开一个定时器，让函数隔一秒执行一次。
toTime(); setInterval(toTime,1000);至此一个钟表效果就写完了，下面是全部源代码
效果源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>钟表</title> <style> #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;} #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);}*/ #wrap ul li:nth-of-type(5n+1){ height:12px;} #hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;} #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;} #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;} .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;} </style> </head> <body> <div> <ul> <!--<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>--> </ul> <div></div> <div></div> <div></div> <div></div> </div> <script> var oList=document.getElementById("list");//获取到刻度 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//获取时针 var oMin=document.getElementById("min");//获取分针 var oSec=document.getElementById("sec");//获取秒针 var oLi=""; var sCss=""; for (var i=0;i<60;i++) { //一个表盘总共是60个刻度 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}"; oLi+="<li></li>"; }; oList.innerHTML=oLi; oCss.innerHTML+=sCss;//表盘刻度渲染完成 toTime(); setInterval(toTime,1000); function toTime(){ var oDate=new Date();//获取当前时间 var iSec=oDate.getSeconds();//获取当前秒 var iMin=oDate.getMinutes()+iSec/60;//获取当前分 var iHour=oDate.getHours()+iMin/60;//获取当前时 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度) oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度) oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度) }; </script> </body> </html>用CSS3实现钟表效果
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41840.html
- 上一篇：网页制作设计需要掌握的三种技能
- 下一篇：FPM与FastCGI，CGI有什么关系？
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")