介绍 <李> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"/比;
& lt; title>钟表& lt;/title>
& lt;风格id=癱ss"祝辞
#包装{宽度:200 px;身高:200 px;边界:2 px固体# 000;保证金:100 px汽车;border - radius: 50%;位置:相对;}
#包装ul{保证金:0;填充:0;身高:200 px;位置:相对;list-style:没有;}
李#包装ul{宽度:2 px;身高:6 px;背景:# 000;位置:绝对的;左:99 px;上图:0;-webkit-transform-origin:中心100 px;}/* #包装ul李:nth-of-type (1) {-webkit-transform:旋转(0);}
#包装ul李:nth-of-type (2) {-webkit-transform:旋转(6度);}
#包装ul李:nth-of-type (3) {-webkit-transform:旋转(12度);}
#包装ul李:nth-of-type (4) {-webkit-transform:旋转(18度);}
#包装ul李:nth-of-type (5) {-webkit-transform:旋转(24度);}
#包装ul李:nth-of-type (6) {-webkit-transform:旋转(30度);}
#包装ul李:nth-of-type (7) {-webkit-transform:旋转(36度);}
#包装ul李:nth-of-type (8) {-webkit-transform:旋转(42度);}*/#包装ul李:nth-of-type (5 n + 1){高度:12 px;}
#小时{宽度:6 px;高度:45 px;背景:# 000;位置:绝对的;左:97 px;上图:55 px; -webkit-transform-origin:底部;}
#分钟{宽度:4 px;身高:65 px;背景:# 999;位置:绝对的;左:98 px;上图:35 px; -webkit-transform-origin:底部;}
#秒{宽度:2 px;身高:80 px;背景:红色;位置:绝对的;左:99 px;上图:20 px; -webkit-transform-origin:底部;}
.icon{宽度:20 px;高度:20 px;背景:# 000;这个特性:50%;位置:绝对的;左:90 px;上图:90 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=皐rap"祝辞
& lt; ul id=發ist"祝辞
& lt; !——& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>——比;
& lt;/ul>
& lt; div id=癶our"祝辞& lt;/div>
& lt; div id=癿in"祝辞& lt;/div>
& lt; div id=皊ec"祝辞& lt;/div>
& lt; div> & lt;/div>
& lt;/div>
& lt; script>
var oList=. getelementbyid (“list");//获取到刻度
var ocs=. getelementbyid (“css");
var oHour=. getelementbyid (“hour");//获取时针
var oMin=. getelementbyid (“min");//获取分针
var oSec=. getelementbyid (“sec");//获取秒针
var奥利=?“;
var sCss=?“;
(var i=0; i<60;我+ +){//一个表盘总共是60个刻度
sCss +=?包装ul李:nth-of-type (“+ (i + 1) +“) {-webkit-transform:旋转(“+ i * 6 +“度);}“;
奥利+=? lt; li> & lt;/li>“;
}；
oList.innerHTML=奥利;
oCss.innerHTML +=sCss;//表盘刻度渲染完成
产生();
setInterval(产生,1000);
函数产生(){
var oDate=new日期();//获取当前时间
var=iSec oDate.getSeconds();//获取当前秒
iSec/var iMin=oDate.getMinutes() + 60;//获取当前分
var iHour=oDate.getHours () + iMin/60;//获取当前时
oSec.style.WebkitTransform=靶?“+ * 6 +“iSec度)“;//秒针转动角度1秒6度(表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform=靶?“+ iMin * 6 +“度)“;//分钟转动角度1分6度(表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform=靶?“+ iHour * 30 +“度)“;//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
}；
& lt;/script>
& lt;/body>
& lt;/html>
小编给大家分享一下怎么使用css3绘制出圆形动态时钟,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
众所周知的是div形状是方形的,那么我们首先需要使用border - radius属性将其变换成圆形。
<李>为了使指针转动起来,我们需要使用-webkit-transform-origin:中心100 px;来设置我们的旋转基点。然后利用-webkit-transform:旋转(0);让我们的李旋转相应的角度形成相应的刻度。
<李>设计好刻度之后,需要涉及一个nth-of-type()的选择器,用来规定其属于父元素的第几个子元素。
<李>在圆形时钟的正中心我们要设一个div图标用于指针的连接点。
<李>然后我们利用js获取div之后对表盘的刻度进行渲染。
<李>最后开一个定时器,每隔一秒执行一次函数。
