一个使用svg做的动态时钟--svg clock
style="width: 100%; height: 500px" src="http://omni360.github.io/main.html" allowfullscreen="allowfullscreen" frameborder="0">
怎么样很酷吧,以下是源码:
<!DOCTYPE html>
<html>
<title>SVG clock</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="canvas.css" media="all" />-->
<style type="text/css">
#clock {
stroke: #adcd3c;
stroke-linecap: round;
fill: #f2fddb;
}
#face {
stroke-width: 3px;
}
#ticks {
stroke-width: 2px;
}
#hands line {
stroke-linejoin: bevel;
}
#hourhand {
stroke-width: 4px;
}
#minutehand {
stroke-width: 3px;
}
#numbers {
font-size: 16px;
text-anchor: middle;
stroke: none;
fill: #92b0dd;
}
</style>
<script type="text/javascript">
funct