<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css" id="css">

            .wrap{width: 200px;height: 200px;border: 2px solid #000;border-radius: 50%;margin: 100px auto;position: relative;}

            li{position: absolute;width: 2px;height: 5px;top: 0;left: 99px;background: #000;-webkit-transform-origin: center 100px;}

            /*li:nth-child(1){-webkit-transform: rotate(0deg);}

            li:nth-child(2){-webkit-transform: rotate(6deg);}

            li:nth-child(3){-webkit-transform: rotate(12deg);}

            li:nth-child(4){-webkit-transform: rotate(18deg);}

            li:nth-child(5){-webkit-transform: rotate(24deg);}

            li:nth-child(6){-webkit-transform: rotate(30deg);}*/

            li:nth-child(5n+1){height: 10px;}

            #hour{width: 6px;height: 40px;background: #000;position: absolute;left: 97px;top: 60px;-webkit-transform-origin: bottom;}

            #min{width: 4px;height: 60px;background: #999;position: absolute;left: 98px;top: 40px;-webkit-transform-origin: bottom;}

            #sec{width: 2px;height: 70px;background: #f00;position: absolute;left: 99px;top: 30px;-webkit-transform-origin: bottom;}

            .ico{width: 10px;height: 10px;background: #000;position: absolute;top: 95px;left: 95px;border-radius: 50%;}

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var oUl=document.getElementById("list");

                var oCss=document.getElementById("css");

                var oHour=document.getElementById("hour");

                var oMin=document.getElementById("min");

                var oSec=document.getElementById("sec");

                var aLi='';

                var sss='';

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

                    aLi+="<li></li>";

                    sss+='li:nth-child('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}'

                }

                oUl.innerHTML=aLi;

                oCss.innerHTML+=sss;

                function toTime(){

                    var date=new Date();

                    var mySec=date.getSeconds();

                    var myMin=date.getMinutes()+mySec/60;

                    var myHour=date.getHours()+myMin/60;

                    oHour.style.webkitTransform='rotate('+myHour*30+'deg)';

                    oMin.style.webkitTransform='rotate('+myMin*6+'deg)';

                    oSec.style.webkitTransform='rotate('+mySec*6+'deg)';

                }

                toTime();

                setInterval(toTime,1000);

            }

        </script>

    </head>

    <body>

        <div class="wrap">

            <ul id="list">

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

        </div>

    </body>

</html>

使用css3做钟表的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  3. 利用HTML5 与CSS3 做的放大镜

    利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...

  4. CSS3做动物走路效果

    CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...

  5. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  6. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  7. 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  8. 用CSS3做3D动画的那些事

    年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...

  9. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

随机推荐

  1. C++进程间通信

    # C++进程间通信 # 进程间通讯的四种方式:剪贴板.匿名管道.命名管道和邮槽 ## 剪切板 ## //设置剪切板内容 CString str; this->GetDlgItemText(ID ...

  2. Java IO之字符流和文件

    前面的博文介绍了字节流,那字符流又是什么流?从字面意思上看,字节流是面向字节的流,字符流是针对unicode编码的字符流,字符的单位一般比字节大,字节可以处理任何数据类型,通常在处理文本文件内容时,字 ...

  3. Backbone.js 中的Model被Destroy后，不能触发success的一个原因

    下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到dest ...

  4. 在Eclipse中使用Git

    一.打开Eclipse,以此点击菜单Help--Install New Software-, 此时将弹出Install对话框,如下图所示: 点击Add按钮,此时将弹出Add Repository对话框 ...

  5. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  6. 十种MYSQL显错注入原理讲解（一）

    开篇我要说下,在<代码审计:企业级Web代码安全架构>这本书中讲十种MYSQL显错注入,讲的很清楚. 感兴趣请去读完,若处于某种原因没读还想了解,那请继续往下. 1.count,rand, ...

  7. wpf版扫雷游戏

    近来觉得wpf做出来的界面很拉风,自己也很喜欢搞些小游戏,感觉这做出来的会很炫,很装逼,(满足自己的一点小小的虚荣心)于是就去自学,发现感觉很不错,可是属性N多,太多了,而且质料也少,很多不会用,只会 ...

  8. UIMenuItem

    UIMenuItem *share = [[UIMenuItem alloc] initWithTitle:@"分享"action:@selector(shareClick:)]; ...

  9. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  10. 将现有MySQL数据库改为大小写不敏感

    用过MySQL的应该都会注意到,默认情况下,Linux下安装的MySQL是大小写敏感的,也就是说Table1和table1可以同时存在.而Windows下的MySQL却是大小写不敏感的,所有表名和数据 ...