用CSS3实现钟表效果

SimonMa 发布于2019-08-01 18:40 / 3114人阅读

摘要：背景最近在学习，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图实现过程首先我们需要在页面中写出一个静态的钟表效果。并对其进行简单样式设置。

背景：最近在学习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实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51950.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); 实现...

codergarden 2019-08-22 15:13 评论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