利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧

　　今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：

　　实现的代码。

　　htm代码：

1. <div class="container">
2. <svg width="600" height="600" class='svg-element'>
4. <filter id="f4" x="-50%" y="-20%" width="200%" height="140%">
5. <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />
6. <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
7. <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
8. filter>
10. <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">
11. <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>
12. filter>
14. <filter id="inset-shadow">
15. <feOffset dx="0" dy="10"/>
16. <feGaussianBlur stdDeviation="15" result="offset-blur"/>
17. <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
18. <feFlood flood-color="black" flood-opacity="1" result="color"/>
19. <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
20. <feComponen