CSS3 时钟 rotate

作者: admin 分类: css 发布时间: 2012-09-03 05:48

利用 css3 transform 实现

（本文修改了 JS，原文：http://css-tricks.com/examples/CSS3Clock/）

预览

CSS3 Clock transform

html 代码

<style type="text/css">
@import url("css/css3time.css");
</style>
<ul id="clock">
	<li id="second"></li>
	<li id="hour"></li>
	<li id="minute"></li>
</ul>

css 代码

#clock {
	position: relative;
	width: 600px;
	height: 600px;
	margin: 0 auto;
	padding: 0;
	background: url('http://seyu.sinaapp.com/-z/css/clock.jpg');
}
#clock li {
	list-style: none;
}
#second,#minute,#hour {
	position: absolute;
	width: 30px;
	height: 600px;
	top: 0px;
	left: 285px;
}
#hour {
	background: url('http://seyu.sinaapp.com/-z/css/hand_hour.png') no-repeat;
	z-index: 1;
}
#minute {
	background: url('http://seyu.sinaapp.com/-z/css/hand_minute.png') no-repeat;
	z-index: 2;
}
#second {
	background: url('http://seyu.sinaapp.com/-z/css/hand_second.png') no-repeat;
	z-index: 3;
}

JavaScript代码链接 http://zhengxianjun.sinaapp.com/tools/script/css3time-seyu.js

时钟效果

只是这个是拾人牙慧。