一款漂亮古朴的HTML5钟表效果
<!DOCTYPE>
<html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一款漂亮古朴的HTML5钟表效果丨芯晴网页特效丨CsrCode.Cn</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
body.experiment {
background: #fff;
}
.start {
text-align: center;
font-size: 2em;
font-weight: bold;
margin: 5em;
}
#clock {
position: relative;
width: 378px;
height: 378px;
background-image: url('/jscss/demoimg/201208/2012031316573623.png');
left: 50%;
margin: 5em 0 0 -189px;
}
#clock div {
position: absolute;
}
#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
-ms-transition: -ms-transform 600000s linear;
transition: transform 600000s linear;
}
#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
-ms-transform: rotate(3600000deg);
-transform: rotate(3600000deg);
}
#clock img[src*='minute'] {
-webkit-transition: -webkit-transform 360000s linear;
-moz-transition: -moz-transform 360000s linear;
-o-transition: -o-transform 360000s linear;
-ms-transition: -ms-transform 360000s linear;
transition: transform 360000s linear;
}
#clock:target img[src*='minute'] {
-webkit-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
-ms-transform: rotate(36000deg);
transform: rotate(36000deg);
}
#clock img[src*='hour'] {
-webkit-transition: -webkit-transform 216000s linear;
-moz-transition: -moz-transform 216000s linear;
-o-transition: -o-transform 216000s linear;
-ms-transition: -ms-transform 216000s linear;
transition: transform 216000s linear;
}
#clock:target img[src*='hour'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body class="experiment">
<div id="wrapper">
<header id="header">
<aside class="tweetThis">
<a href="#" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr">滴水成兵</a>
</aside>
</header>
<div id="experiment">
<div id="clock">
<div id="hour"><img src="/jscss/demoimg/201208/2012031317105412.png" alt=""></div>
<div id="minute"><img src="/jscss/demoimg/201208/2012031317113418.png" alt=""></div>
<div id="second"><img src="/jscss/demoimg/201208/2012031317114532.png" alt=""></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
startClock();
setInterval(function(){startClock();},1000)
function startClock() {
var angle = 360/60,
date = new Date(),
hour = (function() {
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
return h
})(),
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;
if(prop) {
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
}
document.title = date
});
</script>
</body>
</html>
<br><font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</p></font>
<html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一款漂亮古朴的HTML5钟表效果丨芯晴网页特效丨CsrCode.Cn</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
body.experiment {
background: #fff;
}
.start {
text-align: center;
font-size: 2em;
font-weight: bold;
margin: 5em;
}
#clock {
position: relative;
width: 378px;
height: 378px;
background-image: url('/jscss/demoimg/201208/2012031316573623.png');
left: 50%;
margin: 5em 0 0 -189px;
}
#clock div {
position: absolute;
}
#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
-ms-transition: -ms-transform 600000s linear;
transition: transform 600000s linear;
}
#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
-ms-transform: rotate(3600000deg);
-transform: rotate(3600000deg);
}
#clock img[src*='minute'] {
-webkit-transition: -webkit-transform 360000s linear;
-moz-transition: -moz-transform 360000s linear;
-o-transition: -o-transform 360000s linear;
-ms-transition: -ms-transform 360000s linear;
transition: transform 360000s linear;
}
#clock:target img[src*='minute'] {
-webkit-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
-ms-transform: rotate(36000deg);
transform: rotate(36000deg);
}
#clock img[src*='hour'] {
-webkit-transition: -webkit-transform 216000s linear;
-moz-transition: -moz-transform 216000s linear;
-o-transition: -o-transform 216000s linear;
-ms-transition: -ms-transform 216000s linear;
transition: transform 216000s linear;
}
#clock:target img[src*='hour'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body class="experiment">
<div id="wrapper">
<header id="header">
<aside class="tweetThis">
<a href="#" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr">滴水成兵</a>
</aside>
</header>
<div id="experiment">
<div id="clock">
<div id="hour"><img src="/jscss/demoimg/201208/2012031317105412.png" alt=""></div>
<div id="minute"><img src="/jscss/demoimg/201208/2012031317113418.png" alt=""></div>
<div id="second"><img src="/jscss/demoimg/201208/2012031317114532.png" alt=""></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
startClock();
setInterval(function(){startClock();},1000)
function startClock() {
var angle = 360/60,
date = new Date(),
hour = (function() {
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
return h
})(),
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;
if(prop) {
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
}
document.title = date
});
</script>
</body>
</html>
<br><font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</p></font>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
