用CSS3實現鐘表效果

codergarden 發布于2019-08-22 15:13 / 3365人閱讀

摘要：背景最近在學習，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。效果圖實現過程首先我們需要在頁面中寫出一個靜態的鐘表效果。并對其進行簡單樣式設置。

背景：最近在學習CSS3，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。

效果圖

實現過程

1.首先我們需要在頁面中寫出一個靜態的鐘表效果。首先我們需要一個表盤div wrap 對其進行簡單的樣式設置，用border-radius屬性將其設置成圓形。

        
        #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旋轉相應的角度形成相應的刻度。

        
            
 
            
            
            
            
            
            
            
        
        #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，圓點。并對其進行簡單樣式設置。

        
        
        
        
        #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.接下來我們來寫一下讓鐘表動起來的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+="";
        };
        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);

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

效果源碼




    
    鐘表

云服務器 GPU云服務器這種效果怎么實現實現放大鏡效果 java實現濾鏡效果 js實現放大鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93281.html

用CSS3實現鐘表效果

摘要：背景最近在學習，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。效果圖實現過程首先我們需要在頁面中寫出一個靜態的鐘表效果。并對其進行簡單樣式設置。背景：最近在學習CSS3，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實現...

1treeS 2019-08-30 14:06 評論0 收藏0
用CSS3實現鐘表效果

摘要：背景最近在學習，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。效果圖實現過程首先我們需要在頁面中寫出一個靜態的鐘表效果。并對其進行簡單樣式設置。背景：最近在學習CSS3，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實現...

SimonMa 2019-08-01 18:40 評論0 收藏0
用css3+js寫了一個鐘表

摘要：有一天看到旋轉這個屬性突發奇想的寫了一個鐘表沒做瀏覽器兼容來一起看看是怎么寫的吧先給個成品圖最終結果是個樣子的動態的首先思考了一下頁面的布局大致需要層最底層是一個表盤的背景圖然后其余層分別是時針分針秒針的圖層代碼如下變量名是隨便起的不要有一天看到css3旋轉這個屬性,突發奇想的寫了一個鐘表(沒做瀏覽器兼容),來一起看看是怎么寫的吧! 先給個成品圖,最終結果是個樣子的(動態的). 　　　　　　...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
（30個原生js挑戰）原生js實現鐘表

摘要：緊接著昨天的實例，第二個是原生實現鐘表特效。然后根據鐘表中，角度和時間的算法關系。需要注意的是，我的算法和之前的算法不一樣，這個可以根據自己的想法實現，實現的效果是不一樣的。首先知道鐘表是，然后根據一個小時，來算出各個針的角度。緊接著昨天的實例，第二個是原生js實現鐘表特效。首先介紹下大致思路，首先要用css把時針分針和秒針畫出來。然后根據鐘表中，角度和時間的算法關系。設置角度。 ...

pcChao 2019-08-29 12:26 評論0 收藏0
（30個原生js挑戰）原生js實現鐘表

摘要：緊接著昨天的實例，第二個是原生實現鐘表特效。然后根據鐘表中，角度和時間的算法關系。需要注意的是，我的算法和之前的算法不一樣，這個可以根據自己的想法實現，實現的效果是不一樣的。首先知道鐘表是，然后根據一個小時，來算出各個針的角度。緊接著昨天的實例，第二個是原生js實現鐘表特效。首先介紹下大致思路，首先要用css把時針分針和秒針畫出來。然后根據鐘表中，角度和時間的算法關系。設置角度。 ...

taowen 2019-08-20 15:50 評論0 收藏0