<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>钟表</title>
<style type="text/css" id="css">
    #clock{width:200px;height:200px;border:2px solid #333333;margin:100px auto;border-radius:50%;position: relative;
            box-shadow: 0 0 10px #FCE300; background:url(1.jpg) no-repeat;background-size: 200px 200px;}
    #clock ul{margin: 0;padding: 0;list-style: none;height:200px;position: relative;}
    #clock ul li{background: #010101;width: 2px;height: 6px;position: absolute;left:99px;top:0;
                -webkit-transform-origin:center 100px;-moz-transform-origin:center 100px;
                -ms-transform-origin:center 100px;-o-transform-origin:center 100px;
                transform-origin:center 100px;}
    #clock ul li:nth-of-type(5n+1){height:10px;}    
    #hour{width: 6px;height: 35px;background: #f00;position: absolute;left: 97px;top:65px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    #min{width: 4px;height: 55px;background: blue;position: absolute;left: 98px;top:45px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}
    #sec{width: 2px;height: 80px;background: orange;position: absolute;left: 99px;top:20px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    .Icon{position: absolute;left: 95px;top:95px;width: 10px;height: 10px;background:#242424;border-radius: 50%;}

</style>
<script type="text/javascript">
    window.onload=function(){
        var oCss = document.getElementById("css");
        var oClock = document.getElementById("clock");
        var oHour = document.getElementById("hour");
        var oMin = document.getElementById("min");
        var oSec = document.getElementById("sec");
        var oUl = oClock.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var str = "";
        var sCss = "";
        for(var i=0;i<60;i++){
            //var oLi = document.createElement('li');
            //oUl.appendChild(oLi);
            str+="<li></li>";
            sCss+="#clock ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+6*i+"deg);-moz-transform:rotate("+6*i+"deg);-ms-transform:rotate("+6*i+"deg);-o-transform:rotate("+6*i+"deg);transform:rotate("+6*i+"deg);}";
        }
        oUl.innerHTML = str;
        oCss.innerHTML += sCss;
        setInterval(time,1000);
        time();
        function time(){
            var oDate = new Date();    
            var aSec = oDate.getSeconds();
            var aMin = oDate.getMinutes()+aSec/60;
            var aHour = oDate.getHours()+aMin/60;    
            
            oHour.style.WebkitTransform = "rotate("+aHour*30+"deg)";
            oMin.style.WebkitTransform = "rotate("+aMin*6+"deg)";
            oSec.style.WebkitTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MozTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MozTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MozTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MsTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MsTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MsTransform = "rotate("+aSec*6+"deg)";
            oHour.style.OTransform = "rotate("+aHour*30+"deg)";
            oMin.style.OTransform = "rotate("+aMin*6+"deg)";
            oSec.style.OTransform = "rotate("+aSec*6+"deg)";
            oHour.style.transform = "rotate("+aHour*30+"deg)";
            oMin.style.transform = "rotate("+aMin*6+"deg)";
            oSec.style.transform = "rotate("+aSec*6+"deg)";
        }
        
    }
</script>
</head>
<body>
    <div id="clock">
        <ul>
            
        </ul>

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

<div class="Icon"></div>

</div>
</body>
</html>

效果：

css3实现钟表特效的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  3. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  4. CSS3实现烟花特效 --web前端

    烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...

  5. 纯CSS3实现3D特效的iPhone 6动画

    iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示    ...

  6. CSS3 filter10种特效整理

    -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.一共有10种最基本的特效,下来这个DEMO很好的展示了这些效果: <!DOCTYPE html ...

  7. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  8. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  9. css3实现钟表效果

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

随机推荐

  1. Razor 语法快速参考

    Razor 语法快速参考   本文引自:http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx 语法名称 Raz ...

  2. 【转】Android 混淆代码总结

    http://blog.csdn.net/lovexjyong/article/details/24652085 为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的 ...

  3. Redis实战之Redis + Jedis[转]

    http://blog.csdn.net/it_man/article/details/9730605 2013-08-03 11:01 1786人阅读 评论(0) 收藏 举报   目录(?)[-] ...

  4. kernel笔记:TCP参数

    http://blog.chinaunix.net/uid-27119491-id-3346430.html 本文将介绍网络连接建立的过程.收发包流程,以及其中应用层.tcp层.ip层.设备层和驱动层 ...

  5. hdu2011java

    多项式求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  6. Linux强制踢出登录用户（断线账户剔除）

    首先,用w查看登录用户 :: up days, :, users, load average: 1.00, 1.01, 1.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU ...

  7. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  8. [DEncrypt] C# DEncrypt加密/解密帮助类（转载）

    点击下载 DEncrypt.rar 这个类是关于加密,解密的操作,文件的一些高级操作1.使用 缺省密钥字符串 加密/解密string2.使用 给定密钥字符串 加密/解密string3.使用 缺省密钥字 ...

  9. mvc5 + ef6 + autofac搭建项目（三）

    前面已经基本完成了框架的搭建,后面就是实现了,后面主要说下前端的东西bootstrap的使用和相关插件. 看图: 实现比较简单,在主页面只引入共用部分的 js等相关包,毕竟不是所有页面都需要列表以及其 ...

  10. oracle sql语句

    一.ORACLE的启动和关闭1.在单机环境下要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下su - oracle a.启动ORACLE系统oracle>svrmgrlSVRM ...