溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘

發(fā)布時(shí)間：2020-09-14 11:44:34 來(lái)源：億速云 閱讀：186 作者：小新 欄目：web開發(fā)

小編給大家分享一下怎么使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的原理

  1. 眾所周知的是div形狀是方形的，那么我們首先需要使用border-radius屬性將其變換成圓形。

  2. 為了使指針轉(zhuǎn)動(dòng)起來(lái)，我們需要使用 -webkit-transform-origin:center 100px;來(lái)設(shè)置我們的旋轉(zhuǎn)基點(diǎn)。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。

  3. 設(shè)計(jì)好刻度之后，需要涉及一個(gè)nth-of-type()的選擇器，用來(lái)規(guī)定其屬于父元素的第幾個(gè)子元素。

  4. 在圓形時(shí)鐘的正中心我們要設(shè)一個(gè)div icon用于指針的連接點(diǎn)。

  5. 然后我們利用js獲取div之后對(duì)表盤的刻度進(jìn)行渲染。

  6. 最后開一個(gè)定時(shí)器，每隔一秒執(zhí)行一次函數(shù)。

使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>鐘表</title>
<style id="css">
        #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 id="wrap">
    <ul id="list">
        <!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div></div>
    </div>
    <script>
        var oList=document.getElementById("list");//獲取到刻度
        var oCss=document.getElementById("css");
        var oHour=document.getElementById("hour");//獲取時(shí)針
        var oMin=document.getElementById("min");//獲取分針
        var oSec=document.getElementById("sec");//獲取秒針
        var oLi="";
        var sCss="";
        for (var i=0;i<60;i++) { //一個(gè)表盤總共是60個(gè)刻度
            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();//獲取當(dāng)前時(shí)間
            var iSec=oDate.getSeconds();//獲取當(dāng)前秒
            var iMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分
            var iHour=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度)
        };
</script>
</body>
</html>

實(shí)例效果如圖所示

怎么使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘

以上是怎么使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手