css3实现钟表特效

<!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>
</body>
</html>

效果：

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

css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
CSS3实现烟花特效 --web前端
烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...
纯CSS3实现3D特效的iPhone 6动画
iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示 ...
CSS3 filter10种特效整理
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.一共有10种最基本的特效,下来这个DEMO很好的展示了这些效果: <!DOCTYPE html ...
7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮按钮实现非常简单今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片演示和下载地址 2.css3阴影动画效果演示和下载地址 3.拉窗帘特效图片演示和下载地址 4.css3文字特效动画演示和下载地址 5.css3时钟代码演示和下载 ...
css3实现钟表效果
利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下: <head> <meta charset="UTF-8"> <titl ...

随机推荐

Fastjson介绍
简单介绍 Fastjson是一个Java语言编写的高性能功能完好的JSON库. 高性能 fastjson採用独创的算法,将parse的速度提升到极致,超过全部json库,包含以前号称最快的jackso ...
android.util.Log说明和android 像素说明
1. android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, ...
android开发的学习路线
参考资料:千锋3G学院--课程大纲 http://www.mobiletrain.org 看了专业的培训机构的课程大纲,才知道,自己学习android的路途才刚刚开始!特此整理分享一下,希望能帮 ...
2016 11 9遇到问题 http请求的各种方式
遇到问题:对接网易七鱼调用他们接口是出现问题 1.对方要求除上传文件外,其他所有接口请求Content-Type类型为:application/json;charset=utf-8:请求内容需要 ...
java 窗口的一些示例代码，可直接运行
代码链接如下: http://pan.baidu.com/s/1gdlCI4N 有应用SWING,也有应用AWT,可视情况而定. 窗口程序运行需要jdk1.7环境(测试可用).
nginx同时监听本机ipv4/ipv6端口
修改nginx.conf配置文件 server { listen ; listen [::]:; } 0.0.0.0 表示本机所有ipv4地址,需要监听特定地址替换即可 [::] 表示本机所有ip ...
HDU 4196 Remoteland
题意:给定一个n,然后让你从1-n中选出某些数乘起来,使得乘积最大,并且乘积必须是完全平方数. 思路:将1-n种每个数都分解素因子,把他们的素因子的幂加起来,如果是偶数,就说明可以构成完全平方数,乘起 ...
SharePoint Attachement操作代码
下载文件如果下载其它类别的文件: SPSecurity.RunWithElevatedPrivileges(].ToString(); swi ...
HTTP 错误 500.19- Internal Server Error 错误解决方法分类： Windows服务器配置 2015-01-08 20:16 131人阅读评论(0) 收藏
1.第一种情况如下: 解决方法如下: 经过检查发现是由于先安装Framework组件,后安装iis的缘故,只需重新注册下Framework就可以了,具体步骤如下 1 打开运行,输入cmd进入到命令提示 ...
java 内部类学习
类和内部类的关系就如同人和心脏的关系. 实例1:内部类的基本结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 //外部 ...

css3实现钟表特效

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

随机推荐

热门专题