一直想学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. Java消息服务

    什么是消息? 消息是可编程实现两端通信的机制.通常的一些消息技术如:TCP/IP Sockets.管道.文件.共享存储. Java消息服务 Java消息服务,即Java Message Service ...

  2. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  3. attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

  4. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  5. IIS 7.0 的 ASP.NET 应用程序生命周期概述（转载）

    IIS 7.0 的 ASP.NET 应用程序生命周期概述更新:2007 年 11 月本主题介绍在 IIS 7.0 集成模式下运行以及与 IIS 7.0 或更高版本一起运行的 ASP.NET 应用程序的 ...

  6. 关于android:focusable属性

    http://www.cnblogs.com/Gaojiecai/archive/2013/06/18/3142783.html Android属性 android:focusableInTouchM ...

  7. Win8.1专业版、核心板和企业版有什么区别

    Win8.1核心版(一般就称之为Windows 8.1) + Win8.1 专业版(称之为Windows 8.1 Pro),根据用户输入的序列号(就是Win8密钥)来区分安装.Win8.1企业版(称之 ...

  8. 2014.11.12模拟赛【美妙的数字】| vijos1904学姐的幸运数字

    美妙的数字(number.c/.cpp/.pas) 题目描述 黄巨大认为非负整数是美妙的,并且它的数值越小就越美妙.当然0是最美妙的啦. 现在他得到一串非负整数,对于每个数都可以选择先对它做二进制非运 ...

  9. Linux服务器SNMP常用OID (转)

    原文地址:http://www.haiyun.me/archives/linux-snmp-oid.html 收集整理一些Linux下snmp常用的OID,用做服务器监控很不错. 服务器负载: 1 2 ...

  10. 【CF 189A Cut Ribbon】dp

    题目链接:http://codeforces.com/problemset/problem/189/A 题意:一个长度为n的纸带,允许切割若干次,每次切下的长度只能是{a, b, c}之一.问最多能切 ...