背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。

效果图

实现过程

1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。

        <div id="wrap"></div>

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

        <ul id="list">

            <li></li> <!--刻度-->

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        #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，圆点。并对其进行简单样式设置。

        <div id="hour"></div>

        <div id="min"></div>

        <div id="sec"></div>

        <div class="icon"></div>

        #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+="<li></li>";

        };

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

至此一个钟表效果就写完了，下面是全部源代码

效果源码

<!DOCTYPE html>

<html lang="en">

<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 class="icon"></div>

    </div>

    <script>

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

        for (var i=0;i<60;i++) { //一个表盘总共是60个刻度

            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();//获取当前时间

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

        };

</script>

</body>

</html>

用CSS3实现钟表效果的更多相关文章

  1. js css3实现钟表效果

    原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...

  2. css3实现钟表效果

    利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下: <head> <meta charset="UTF-8"> <titl ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  6. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  7. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  8. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  9. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

随机推荐

  1. linux压缩管理系统

    Linux压缩管理系统windows        rar       zipLinux       zip        tar.gz       tar.bz2       tar.xz 压缩的好 ...

  2. 分布式全局唯一ID与自增序列

    包含时间顺序的ID 此场景最简单的实现方案,就是采用 twitter 的 Snowflake 算法.ID总长64位,第1位不可用,41位表示时间戳,10位表示生成机器的id,后12位表示序列号. 为什 ...

  3. PyCharm4.5 中文破解版破解步骤

    1.在下载之家下载PyCharm4.5中文版软件包,然后右击软件安装包选择解压到“pycharm4.5.3”. 2.在解压文件夹中找到pycharm-professional-4.5.3,右击打开. ...

  4. python语法基础-基础-赋值与深浅拷贝

    ##################################### 预备知识一——python的变量及其存储 在详细的了解python中赋值.copy和deepcopy之前,我们还是要花一点时 ...

  5. 微软研究院张永光博士与Dilek Hakkani-Tür博士当选2014年 IEEE院士

    Hakkani-Tür博士当选2014年 IEEE院士" title="微软研究院张永光博士与Dilek Hakkani-Tür博士当选2014年 IEEE院士"> ...

  6. zabbix报错

    zabbix报错  原文:https://www.cnblogs.com/dbslinux/p/9465803.html https://www.cnblogs.com/losbyday/catego ...

  7. 在CMD中操作mysql数据库出现中文乱码解决方案

    百度了一下..有说将cmd字符编码用chcp命令改为65001(utf8字符编码),可这样之后根本无法输入中文,查询出的中问结果依旧乱码 其实,只要保证cmd客户端和MySQL两者编码一致即可. 但现 ...

  8. MariaDB 命令

    1.账号登入 mysql -u root -p 上述命令,“root” 是登入账号,上述命令回车后,则进行密码的输入 登入成功后如下: 2.创建用户命令 create user 'new_user'@ ...

  9. 机器学习迁移模型到IOS

    https://paulswith.github.io/2018/02/24/%E8%BF%81%E7%A7%BB%E5%AD%A6%E4%B9%A0InceptionV3/ 上文记录了如何从一个别人 ...

  10. MySQL 的 RowNum 实现（排行榜计算用户排名）

    1. 计算用户排名最高效的方法 例如:通过用户分享个数排名,那么自己的排名就是:比自己分享数多的用户个数 + 1 ' and `count` > '自己分享个数' 缺点:当多个用户分享个数相同的 ...