一直想学CSS3，今天别的论坛看到的例子，挺好，mark起来以后自己看。

<!doctype html>

<html>

    <head>

        <meta charset='utf-8'>

        <title>title</title>

        <style>

            *{margin:0;padding:0}

            #box{

                width:300px;

                height:300px;

                border:1px solid #000;

                border-radius:50%;

                position:absolute;

                top:100px;left:300px;

                box-shadow:1px 1px 5px #000;

                cursor:pointer;

            }

            .hour{

                width:14px;

                height:80px;

                background:#000;

                position:absolute;

                top:50%;left:50%;

                margin:-80px 0 0 -7px;

                transform-origin:center bottom;

            }

            .min{

                width:14px;

                height:100px;

                background:#000;

                position:absolute;

                top:50%;left:50%;

                margin:-100px 0px 0px -7px;

                border-radius:50% 50% 0 0;

                transform-origin:center bottom;

            }

            .sec{

                width:4px;

                height:120px;

                background:red;

                position:absolute;

                top:50%;left:50%;

                margin:-120px 0 0 -2px;

                transform-origin:center bottom;

            }

            .cap{

                width:20px;

                height:20px;

                background:#999;

                border-radius:50%;

                position:absolute;

                top:50%;left:50%;

                margin:-10px 0 0 -10px;

            }

            .scale{

                width:4px;

                height:10px;

                background:#000;

                position:absolute;

                left:50%;

                margin-left:-2px;

                display:block;

                -webkit-transform:rotate(45deg);

                transform-origin:center 150px;

            }

            .bs{

                width:6px;height:18px;

                background:#000;

                position:absolute;

                left:50%;

                margin-left:-3px;

                display:block;

                -webkit-transform:rotate(45deg);

                transform-origin:center 150px;

            }

            .bs em{

                width:50px;

                text-align:center;

                margin:17px 0;

                position:absolute;

                top:0px;left:50%;

                margin-left:-25px;

                font-style:normal

            }

        </style>

    <script type="text/javascript">

        window.onload = function(){

            var oBox = document.getElementById('box');

            var oH = document.querySelector('.hour');

            var oM = document.querySelector('.min');

            var oS = document.querySelector('.sec');

            var  N = 60;

            for(var i=0;i<N;i++){

                var oSpan = document.createElement('span');

                if(i%5==0){

                    oSpan.className = 'bs';

                    var num = i/5==0 ? 12:i/5;

                    oSpan.innerHTML = '<em>'+num+'</em>';

                    oSpan.style.transform = 'rotate('+(i*N)+'deg)';

                    oSpan.children[0].style.transform = 'rotate('+ -i*6 +'deg)';

                }else{

                    oSpan.className = 'scale';

                }

                oBox.appendChild(oSpan);

                oSpan.style.transform = 'rotate('+6*i+'deg)';

            }

            function clock(){

                var oDate = new Date();

                var h = oDate.getHours();

                var m = oDate.getMinutes()+1;

                var s = oDate.getSeconds();

                var ms= oDate.getMilliseconds();

                oH.style.transform = 'rotate('+(h*30+m/60*30)+'deg)';

                oM.style.transform = 'rotate('+(m*6+s/60*6)+'deg)';

                oS.style.transform = 'rotate('+(s*6+ms/1000*6)+'deg)';

            }

            clock();

            setInterval(clock,30);

        }

    </script>

    </head>

    <body>

        <div id="box">

            <div class="hour"></div>

            <div class="min"></div>

            <div class="sec"></div>

            <div class="cap"></div>

        </div>

    </body>

</html>

CSS3实现时间表的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. .NET Core RC2/RTM 明确了时间表

    .NET Core 经过了将近2年的开发,去年12月份发布的RC1版本,明确来说那只是一个beta版本,自从RC1发布以来,看到github里的RC2分支,整个工具链都发生了很大的变化,大家都在焦急的 ...

  4. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  6. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  7. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  8. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

随机推荐

  1. JDBC框架

    一.元数据介绍 元数据指的是"数据库"."表"."列"的定义信息. 1.1.DataBaseMetaData元数据 Connection.g ...

  2. 转载：CPU的位数和操作系统的位数

    1. 32位系统最大只能使用3.5G的内存,而64位系统最大能够使用128G内存. 2. 32位CPU只能安装和使用32位.16位的系统和软件,无法使用64位系统及软件. 3. 64位可以安装64位系 ...

  3. PHPexcel 判断日期类型

    若已经确定某列为日期型数据: for($currentRow=2;$currentRow <= $allRow;$currentRow++){ //从哪列开始,A表示第一列 for($curre ...

  4. 【4】python核心编程 第七章-映射和集合类型

    1.映射类型的相关函数 函数 操作 dict([container]) 创建字典的工厂函数.如果提供了容器类(container) , 就 用其中的条目填充字典,否则就创建一个空字典. len(map ...

  5. 异步编程设计模式 - IronPythonDebugger

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...

  6. package.json 的语法解释

    https://www.ijser.cn/npm-package-json-document/ 形式可以有如下多种: version 严格匹配某个版本 >version 必须大于某个版本 > ...

  7. NOD32强制卸载工具使用方法【转】

    装了ESET NOD32又忘记密码了,无法卸载,怎么办? 以下转自官网:http://faq.eset.com.cn/index.php?pid=254 [适用产品:ESET NOD32 防病毒软件4 ...

  8. DJANGO的HTTPRESPONSE流式输出

    在项目当中遇到的问题,网上有样例代码,但都不行,后来,发现在了1.5版本之后,新的STREAMHTTPRESPONSE对象, 搞定. from django.http import HttpRespo ...

  9. 常用监控SQL

    1.---监控等待事件 select SESSION_ID,NAME,P1,P2,P3,WAIT_TIME,CURRENT_OBJ#,CURRENT_FILE#,CURRENT_BLOCK#     ...

  10. windows phone因为墓碑化导致“正在恢复”的分析

    我们在平时的WP使用过程中,会遇到一个问题 应用在切出,切回后, 有时候,会显示"正在恢复",并等待时间较长,才能回到用户切出时候的画面,但是这种情况并非常见,偶尔发生 有时候,直 ...