<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style id="css">

        #wrap{

            width: 200px;

            height: 200px;

            border: 1px solid #000;

            border-radius: 50%;

            margin: 100px auto;

            position: relative;

        }

        #wrap ul{

            margin: 0;padding: 0;

            height: 200px;

            list-style: none;

            position: relative;

        }

        #wrap ul li{

            width: 2px;height: 8px;background: #000;

            position: absolute;

            left: 99px;

            top:0;

            -webkit-transform-origin: center 100px;

        }

        /*#wrap ul li:nth-of-type(1){

            -webkit-transform: rotate(0deg);

        }

        #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 id="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 aLi='';

        var sCss='';

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

            sCss+='#wrap ul li:nth-of-type('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}';

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

        }

        oList.innerHTML=aLi;

        oCss.innerHTML+=sCss;

        setInterval(toTime,1000);

        toTime();

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

            oMin.style.WebkitTransform='rotate('+iMin*6+'deg)';

            oHour.style.WebkitTransform='rotate('+iHour*30+'deg)';

        }

    </script>

</body>

</html>

　　　　

　　在写的过程中，发现了一个小问题：

　　

　　时分秒的顺序不能写错，开始我把时写在最上面，时针和分针怎么都没反映，这是执行顺序的原因吗？

用CSS3写的钟表的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  4. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  5. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  6. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  7. 所有用CSS3写的3D特效，都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  8. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  9. 使用纯css3写出来的表情包 (^v^)

    效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...

随机推荐

  1. java语句与流程控制

    java程序结构按照结构化程序的思想分为顺序结构,选择结构,和循环结构. ①选择语句 选择结构分为单选择,双选择和多选择.双选择是标准的选择结构,单选择是双选择的简化形式,多选择是双选择的嵌套形式. ...

  2. Android material design support library -- CollapsingToolbarLayout简介

    本文是codetrick上material design support library教程的第三篇,主要讲的是CollapsingToolbarLayout的概念和应用方法. 原文链接:Materi ...

  3. 一个简单C程序的汇编代码分析

    几个重要的寄存器 eip - 用于存放当前所执行的指令地址 esp - 栈(顶)指针寄存器 ebp - 基址(栈底)指针寄存器 简单的C程序 int g(int x) { ; } int f(int ...

  4. uva 11536 - Smallest Sub-Array

    题目大意:按照题目中的要求构造出一个序列,找出最短的子序列,包含1~k. 解题思路:先根据题目的方法构造出序列,然后用Towpointer的方法,用v[i]来记录当前[l, r]中有几个i:当r移动时 ...

  5. hadoop文本转换为序列文件

    在以前使用hadoop的时候因为mahout里面很多都要求输入文件时序列文件,所以涉及到把文本文件转换为序列文件或者序列文件转为文本文件(因为当时要分析mahout的源码,所以就要看到它的输入文件是什 ...

  6. linux下面安装配置LAMP环境

    以centos下面为例.初学者.东西基本都是各个地方找来的.自己手写了一遍.应该印象会很深刻 首先切换到超级管理员模式 1.安装php 一路选择y就行了 安装一些php的扩展 yum -y insta ...

  7. 【Node.js】Event Loop执行顺序详解

    本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTime ...

  8. Manage Spring Boot Logs with Elasticsearch, Logstash and Kibana

    下载地址:https://www.elastic.co/downloads When time comes to deploy a new project, one often overlooked ...

  9. DSP与单片机的区别

    以前刚学习单片机时,经过一订的编程,能实现很多不同的功能,当时就觉得单片机真的是神通广大.后来接触到DSP,发现DSP处理数字在通信上,更加方便.于是我就很好奇的问自己,DSP和单片机,究竟有什么区别 ...

  10. QQ地图api里的 地址解析函数 看不懂 javascript_百度知道

    QQ地图api里的 地址解析函数 看不懂 javascript_百度知道     QQ地图api里的 地址解析函数 看不懂 javascript    2011-09-18 12:18     匿名 ...