這篇文章給大家分享的是有關(guān)怎么使用css3來繪制出圓形動(dòng)態(tài)時(shí)鐘的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是專業(yè)的安多網(wǎng)站建設(shè)公司,安多接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行安多網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的代碼
#wrap{width:200px;height:200px;border:2pxsolid#000;margin:100pxauto;border-radius:50%;position:relative;}
#wrapul{margin:0;padding:0;height:200px;position:relative;list-style:none;}
#wrapulli{width:2px;height:6px;background:#000;position:absolute;left:99px;top:0;-webkit-transform-origin:center100px;}
/*#wrapulli:nth-of-type(1){-webkit-transform:rotate(0);}
#wrapulli:nth-of-type(2){-webkit-transform:rotate(6deg);}
#wrapulli:nth-of-type(3){-webkit-transform:rotate(12deg);}
#wrapulli:nth-of-type(4){-webkit-transform:rotate(18deg);}
#wrapulli:nth-of-type(5){-webkit-transform:rotate(24deg);}
#wrapulli:nth-of-type(6){-webkit-transform:rotate(30deg);}
#wrapulli:nth-of-type(7){-webkit-transform:rotate(36deg);}
#wrapulli:nth-of-type(8){-webkit-transform:rotate(42deg);}*/
#wrapulli: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;}
varoList=document.getElementById("list");//獲取到刻度
varoCss=document.getElementById("css");
varoHour=document.getElementById("hour");//獲取時(shí)針
varoMin=document.getElementById("min");//獲取分針
varoSec=document.getElementById("sec");//獲取秒針
varoLi="";
varsCss="";
for(vari=0;i<60;i++){//一個(gè)表盤總共是60個(gè)刻度
sCss+="#wrapulli:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+i*6+"deg);}";
oLi+="
";};
oList.innerHTML=oLi;
oCss.innerHTML+=sCss;//表盤刻度渲染完成
toTime();
setInterval(toTime,1000);
functiontoTime(){
varoDate=newDate();//獲取當(dāng)前時(shí)間
variSec=oDate.getSeconds();//獲取當(dāng)前秒
variMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分
variHour=oDate.getHours()+iMin/60;//獲取當(dāng)前時(shí)
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉(zhuǎn)動(dòng)角度1秒6度(表盤一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉(zhuǎn)動(dòng)角度1分6度(表盤一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時(shí)針轉(zhuǎn)動(dòng)角度一小時(shí)30度(表盤一圈360度一圈12小時(shí)所以一小時(shí)30度)
};
感謝各位的閱讀!關(guān)于“怎么使用css3來繪制出圓形動(dòng)態(tài)時(shí)鐘”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!