用CSS3實(shí)現(xiàn)鐘表效果

1treeS 發(fā)布于2019-08-30 14:06 / 1390人閱讀

摘要：背景最近在學(xué)習(xí)，看到了一個(gè)小案例，通過(guò)自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。效果圖實(shí)現(xiàn)過(guò)程首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。

背景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過(guò)自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。

效果圖

實(shí)現(xiàn)過(guò)程

1.首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。首先我們需要一個(gè)表盤div wrap 對(duì)其進(jìn)行簡(jiǎn)單的樣式設(shè)置，用border-radius屬性將其設(shè)置成圓形。

        
        #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-            radius:50%; position:relative;}

2.接下來(lái)我們用ul和li來(lái)寫表盤中的刻度，對(duì)其進(jìn)行簡(jiǎn)單的樣式設(shè)置。其中需要注意的是，我們用 -webkit-transform-origin:center 100px;來(lái)設(shè)置我們的旋轉(zhuǎn)基點(diǎn)。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。

        
            
 
            
            
            
            
            
            
            
        
        #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.其中我們?cè)O(shè)計(jì)到了css3的選擇器nth-of-type() ，它規(guī)定其屬于其父元素的第幾個(gè)li元素。
當(dāng)然，我們不可能將表盤的刻度都統(tǒng)統(tǒng)去設(shè)置li的樣式去完成。我們后面需要用js去渲染它。
在渲染之前，我們需要去寫上我們的秒針、分針、時(shí)針。分別是div hour、min、sec，并且我們對(duì)其進(jìn)行樣式的設(shè)置。為了美化一下，我們?cè)賹懸粋€(gè)div icon，圓點(diǎn)。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。

        
        
        
        
        #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;}

4.接下來(lái)我們來(lái)寫一下讓鐘表動(dòng)起來(lái)的JavaScript，首先用js去獲取各個(gè)div。

        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="";

5.接下來(lái)去渲染表盤的刻度。

    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+="";
        };
        oList.innerHTML=oLi;
        oCss.innerHTML+=sCss;//表盤刻度渲染完成

6.接下來(lái)我們?nèi)懸粋€(gè)鐘表表針根據(jù)時(shí)間變動(dòng)的函數(shù)，先利用new Date（）獲取時(shí)間，然后通過(guò)去改變表針的樣式去讓表針根據(jù)時(shí)間去轉(zhuǎn)動(dòng)，秒針一秒相當(dāng)于旋轉(zhuǎn)6度，分鐘一秒相當(dāng)轉(zhuǎn)動(dòng)6度，時(shí)針轉(zhuǎn)動(dòng)1秒相當(dāng)于轉(zhuǎn)動(dòng)30度。

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度)
        };

7.最后我們來(lái)開(kāi)一個(gè)定時(shí)器，讓函數(shù)隔一秒執(zhí)行一次。

        toTime();
        setInterval(toTime,1000);

至此一個(gè)鐘表效果就寫完了，下面是全部源代碼

效果源碼




    
    鐘表

GPU云服務(wù)器云服務(wù)器這種效果怎么實(shí)現(xiàn) 實(shí)現(xiàn)放大鏡效果 java實(shí)現(xiàn)濾鏡效果 js實(shí)現(xiàn)放大鏡效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115779.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

1treeS

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

什么是 Python 編程語(yǔ)言？

閱讀 3729·2021-11-24 09:39
C語(yǔ)言位運(yùn)算符詳解（使用二進(jìn)制實(shí)例深入學(xué)習(xí)理解位運(yùn)算符使用原理）

閱讀 1358·2021-09-30 09:48
Bitwarden免費(fèi)密碼管理軟件實(shí)現(xiàn)跨平臺(tái)在線密碼管理（云端密碼存儲(chǔ)）

閱讀 3365·2021-09-09 11:51
RAKsmart：九月秒殺服務(wù)器$30/月起,洛杉磯/圣何塞/香港/日本站群特價(jià),全場(chǎng)VPS五折

閱讀 2975·2021-09-08 10:41
用CSS3實(shí)現(xiàn)鐘表效果

閱讀 1391·2019-08-30 14:06
CSS詳細(xì)解讀定位

閱讀 2869·2019-08-30 14:01
css-浮動(dòng)

閱讀 927·2019-08-29 17:11
前端面試題（4）JavaScript

閱讀 3231·2019-08-29 15:37

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用CSS3實(shí)現(xiàn)鐘表效果

相關(guān)文章