查看效果：http://hovertree.com/texiao/html5/22/
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas時鐘 - 何問起</title>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/html5/22/hoverclock.cv.js"></script>
<style type="text/css">
#HoverClock {
opacity: 0.8;
-webkit-animation: roll 3s;
animation: roll 3s;
}
@-webkit-keyframes roll {
from {
-webkit-transform: rotate(360deg);
opacity: 0;
}
to {
-webkit-transform: rotate(0deg);
opacity: 0.8;
}
}
@keyframes roll {
from {
transform: rotate(360deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 0.8;
}
}
</style>
</head>
<body>
<br /><br />
<div style="width:150px;margin:0 auto;">
<canvas id="HoverClock" width="150" height="150"></canvas>
</div>
</body>
</html>