HTML5 SVG圆环数字时钟特效代码下载


HTML5 SVG圆环数字时钟特效代码下载
HTML5 SVG圆环数字时钟特效代码下载以及SVG、圆环数字时钟等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<div>
<div class="time">19:02:33</div>
<svg id="menu" viewBox='0 0 100 100'>
<defs>
<filter id="blur" x="-10" y="-10" width="120" height="120">
<feGaussianBlur in="SourceGraphic" stdDeviation=".4" />
</filter>
<filter id="blur2" x="-10" y="-10" width="120" height="120">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<circle class="grey" cx="50" cy="50" r="40" pathlength="12" ></circle>
<circle class="grey" cx="50" cy="50" r="31" pathlength="60" ></circle>
<circle class="grey" cx="50" cy="50" r="22" pathlength="60" ></circle>
<g filter="url(#blur2)">
<circle class="hour" cx="50" cy="50" r="40" pathlength="12" ></circle>
<circle class="min" cx="50" cy="50" r="31" pathlength="60" ></circle>
<circle class="sec" cx="50" cy="50" r="22" pathlength="60" ></circle>
</g>
</svg>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章