1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style id= "css">
  7. #wrap{
  8. 	width:200px;height: 200px;position: relative;border-radius: 50%;
  9. 	border:1px solid black;margin: 100px auto;
  10. }
  11. #wrap ul{
  12. 	margin:0px;padding: 0px;height: 200px;list-style: none;position: relative;
  13. }
  14. #wrap ul li {
  15. 	width: 2px; height: 6px; background: black;position: absolute;left: 98px;top: 0px; -webkit-transform-origin:center 100px;
  16. }
  17. #wrap ul li:nth-of-type(5n+1){height:10px;background:#000;}
  18. #hour{
  19. 	width: 6px;height: 45px;background: #000;position: absolute; left: 97px;top: 55px;-webkit-transform-origin:bottom;
  20. }
  21. #min{
  22. 	width: 4px;height: 65px;background: #999;position: absolute; left: 98px;top: 35px;-webkit-transform-origin:bottom;
  23. }
  24. #sec{
  25. 	width: 2px;height: 80px;background: red;position: absolute; left: 99px;top: 20px;-webkit-transform-origin:bottom;
  26. }
  27. #icon{
  28. 	width:10px;height: 10px;background: #000;position:absolute;border-radius: 50%;left: 95px;top:95px;
  29. }
  30. </style>
  31. <script>
  32. 	window.onload = function (){
  33. 		var oList = document.getElementById("list");
  34. 		var aLi = "";
  35. 		var oHour = document.getElementById("hour");
  36. 		var oMin = document.getElementById("min");
  37. 		var oSec = document.getElementById("sec");
  38. 		for(var i = 0; i < 60; i++)
  39. 		{
  40.  
  41. 			aLi +="<li style='-webkit-transform:rotate("+6*i+"deg)'></li>";
  42.  
  43. 		}
  44. 		oList.innerHTML = aLi;
  45. 		setInterval( function(){
  46. 			toTime(oHour,oMin,oSec);
  47. 		},1000);
  48.  
  49. 		function toTime(oHour,oMin,oSec)
  50. 		{
  51. 			var oDate=new Date();
  52. 			var iSec=oDate.getSeconds();
  53. 			var iMin=oDate.getMinutes()+iSec/60;
  54. 			var iHour=(oDate.getHours()%12)+iMin/60;
  55. 			oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";
  56. 			oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";
  57. 			oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";
  58. 		}
  59.  
  60. 	}
  61. </script>
  62. </head>
  63. 	<body>
  64. 		<div id = "wrap">
  65. 			<ul id = "list">
  66. 			</ul
  67. 		</div>
  68. 		<div id="hour"></div>
  69. 		<div id="min"></div>
  70. 		<div id="sec"></div>
  71. 		<div id="icon"></div>
  72. 	</body>
  73. </html>

　　

css3 钟表的更多相关文章

  1. css3时钟

    参考资料: 奇舞团: http://www.75team.com/archives/851 DEMO:demo 截图: 代码: <!DOCTYPE html> <html lang= ...

  2. 太可爱了！CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

  3. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  4. 15款HTML5/CSS3案例展示，导航，日历，钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  5. 用css3+js写了一个钟表

    有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...

  6. css3实现钟表效果

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

  7. 用CSS3实现钟表效果

    背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来. 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果.首先我们需要一个表盘div wrap 对 ...

  8. 分别用canvas和css3的transform做出钟表的效果

    两种方式实际上在js上的原理都是一样的.都是获取时间对象,再获取时间对象的时分秒,时分秒乘以其旋转一刻度(一秒.一分.一小时)对应的角度.css3中要赋值于transform:rotate(角度),c ...

  9. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

随机推荐

  1. php关于return的关键字

    使用return关键字可以使函数返回值,可以返回包括数组和对象的任意类型,如果省略了 return,则默认返回值为 NULL. function add($a) { return $a+1; } $b ...

  2. Form.ShowDialog和Form.DialogResult

    The dialog result of a form is the value that is returned from the form when it is displayed as a mo ...

  3. [HIHO1041]国庆出游（DFS, bitset）

    题目链接:http://hihocoder.com/problemset/problem/1041 学会了用C++的bitset哈,可喜可贺.以后遇到超过64位想用位来表示状态就不愁了哈. 这题用bi ...

  4. MVC 中使用扩展方法

     扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...

  5. iPad中控制器view初始的width和height

    1> 规律 * width 是宽高中最小的那个值 * height 是宽高中最大的那个值 2> 举例(比如窗口根控制器的view,有状态栏的情况下) * 横屏  width = 748,h ...

  6. HDU 5273 Dylans loves sequence (逆序对，暴力)

    题意: 给定一个序列,对于q个询问:(L,R)之间有几个逆序对?序列元素个数上限1000,q上限10万.仅1测试例子. 思路: [L,R]的逆序对数量可以这么算,假设L<=K<R,将区间拆 ...

  7. 【JavaScript学习笔记】鼠标样式

    style="cursor:hand"   手形 style="cursor:crosshair"   十字形       style="cursor ...

  8. liunx之tar 命令

    tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...

  9. 自定义视图一：扩展现有的视图，添加新的XML属性

    这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! 简介 这个系列详细的介绍了如何穿件Android自定义视图.主要涉及的内容有如何绘制内容,layout和measure的原理,如何继承 ...

  10. uploadify scriptData参数无法传参的问题

    最近需要使用到uploadify,需要向后台传递参数,使用script最多只能够传递一个参数,当然也可以通过合并参数然后再在服务器段拆分参数的方法来传递多个参数,而uploadify插件提供的scri ...