<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style id= "css">

#wrap{

	width:200px;height: 200px;position: relative;border-radius: 50%;

	border:1px solid black;margin: 100px auto;

}

#wrap ul{

	margin:0px;padding: 0px;height: 200px;list-style: none;position: relative;

}

#wrap ul li {

	width: 2px; height: 6px; background: black;position: absolute;left: 98px;top: 0px; -webkit-transform-origin:center 100px;

}

#wrap ul li:nth-of-type(5n+1){height:10px;background:#000;}

#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:10px;height: 10px;background: #000;position:absolute;border-radius: 50%;left: 95px;top:95px;

}

</style>

<script>

	window.onload = function (){

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

		var aLi = "";

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

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

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

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

		{

			aLi +="<li style='-webkit-transform:rotate("+6*i+"deg)'></li>";

		}

		oList.innerHTML = aLi;

		setInterval( function(){

			toTime(oHour,oMin,oSec);

		},1000);

		function toTime(oHour,oMin,oSec)

		{

			var oDate=new Date();

			var iSec=oDate.getSeconds();

			var iMin=oDate.getMinutes()+iSec/60;

			var iHour=(oDate.getHours()%12)+iMin/60;

			oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";

			oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";

			oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";

		}

	}

</script>

</head>

	<body>

		<div id = "wrap">

			<ul id = "list">

			</ul

		</div>

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

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

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

		<div id="icon"></div>

	</body>

</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. leetcode:Sort List(一个链表的归并排序)

    Sort a linked list in O(n log n) time using constant space complexity. 分析:题目要求时间复杂度为O(nlogn),所以不能用qu ...

  2. leetcode:Search a 2D Matrix（数组，二分查找)

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  3. SQL中返回一个字符串在另一个中存在的次数

    ALTER FUNCTION [reg].[f_GetSameStringCntNoSort] ( @str1 VARCHAR(),--源字符串,取该串中的@strLen长度的字符是否在目的字符串 @ ...

  4. R语言randomForest包实现随机森林——iris数据集和kyphosis数据集

    library(randomForest)model.forest<-randomForest(Species~.,data=iris)pre.forest<-predict(model. ...

  5. HDU 3496 (二维费用的01背包) Watch The Movie

    多多想看N个动画片,她对这些动画片有不同喜欢程度,而且播放时长也不同 她的舅舅只能给她买其中M个(不多不少恰好M个),问在限定时间内观看动画片,她能得到的最大价值是多少 如果她不能在限定时间内看完买回 ...

  6. LA 3983 Robotruck

    这道题感觉挺吃力的,还用到了我不熟悉的优先队列 题目中的推导也都看明白了,总之以后还要多体会才是 这里用优先对列的原因就是因为要维护一个滑动区间的最小值,比如在区间里2在1的前面,2在离开这个滑动区间 ...

  7. find命令下的atime,ctime,mtime

    Linux下的find命令在目录结构中搜索文件,并执行指定的操作.linux下的find命令提供了相当多的查找条件,功能很强大,由于find的功能很强大,所以他的选项也很多,今天我们来细说一下find ...

  8. HDU 5327 Olympiad （水题）

    题意:beautiful数字定义为该数字中的十进制形式每一位都不同,给一个区间[L,R],求该区间中有多少个beautiful数字. 思路:数字不大,直接暴力预处理,再统计区间[1,i]有多少个,用c ...

  9. hibernate中使用fetch来决策性能方案

    什么时候用子查询,或者连接查询 一般多个数据的对应用子查询,单一行的数据用连接 (若要查询每个学生分别学了什么课程 ,若要fetch=join.fetch=select) 则是这种情况 Hiberna ...

  10. UESTC 1854

    题目意思  就是说 有一个起点一个终点  和一些虫洞,从一个虫洞进去然后出来,是不需要消耗时间的,注意点就是,虫洞是一条线段,你可以从线段的任意位置进去,从任意位置出来: 所以从一个虫洞到另一个虫洞的 ...