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

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

　　实现的代码。

　　htm代码：

XML/HTML Code复制内容到剪贴板

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. feComponentTransfer in="shadow" result="shadow">
21. feFuncA type="linear" slope="1"/>
22. feComponentTransfer>
23. feComposite operator="over" in="shadow" in2="SourceGraphic"/>
24. filter>
26. filter id="inset-shadow-big">
27. feOffset dx="0" dy="4"/>
28. feGaussianBlur stdDeviation="2" result="offset-blur"/>
29. feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
30. feFlood flood-color="white" flood-opacity="1" result="color"/>
31. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
32. feComponentTransfer in="shadow" result="shadow">
33. feFuncA type="linear" slope="0.5"/>
34. feComponentTransfer>
35. feComposite operator="over" in="shadow" in2="SourceGraphic"/>
36. filter>
38. filter id="inset-shadow-big-bottom">
39. feOffset dx="0" dy="10"/>
40. feGaussianBlur stdDeviation="2" result="offset-blur"/>
41. feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
42. feFlood flood-color="#FFF" flood-opacity="1" result="color"/>
43. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
44. feComponentTransfer in="shadow" result="shadow">
45. feFuncA type="linear" slope="0.5"/>
46. feComponentTransfer>
47. feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>
49. feOffset dx="0" dy="-12"/>
50. feGaussianBlur stdDeviation="2" result="offset-blur"/>
51. feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/>
52. feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>
53. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
54. feComponentTransfer in="shadow" result="shadow">
55. feFuncA type="linear" slope="0.5"/>
56. feComponentTransfer>
57. feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>
59. filter>
61. linearGradient id="LG"
62. gradientTransform="rotate(90 .5 .5)">
63. stop id="s0" offset="0" stop-color="#d6f8e9"/>
64. stop id="s2" offset="1" stop-color="#9ee1c4"/>
65. linearGradient>
67. linearGradient id="LG2"
68. gradientTransform="rotate(-90 .5 .5)">
69. stop id="s0" offset="0.07" stop-color="#fdfefe"/>
70. stop id="s1" offset="0.5" stop-color="#98e2c2"/>
71. stop id="s2" offset="0.8" stop-color="#79c9a7"/>
72. stop id="s3" offset="1" stop-color="#5fbc95"/>
73. linearGradient>
75. linearGradient id="arrow1"
76. gradientTransform="rotate(-90 .5 .5)">
77. stop id="s0" offset="0" stop-color="#07594f"/>
78. stop id="s2" offset="1" stop-color="#01443c"/>
79. linearGradient>
81. linearGradient id="arrowRed"
82. gradientTransform="rotate(-90 .5 .5)">
83. stop id="s0" offset="0" stop-color="#fd5959"/>
84. stop id="s2" offset="1" stop-color="#fe7c7c"/>
85. linearGradient>
87. linearGradient id="center-knob-outter"
88. gradientTransform="rotate(90 .5 .5)">
89. stop id="s0" offset="0" stop-color="#fffefe"/>
90. stop id="s2" offset="1" stop-color="#86ecdb"/>
91. linearGradient>
93. linearGradient id="center-knob-inner"
94. gradientTransform="rotate(90 .5 .5)">
95. stop id="s0" offset="0" stop-color="#a0dcd2"/>
96. stop id="s2" offset="1" stop-color="#dff9ef"/>
97. linearGradient>
99. g transform="translate(50, 20)">
101. rect x="0" y="0"
102. width="382" height="382"
103. fill="url(#LG)"
104. filter="url(#inset-shadow-big-bottom)"
105. rx="75" ry="105" />
107. circle cx="191" cy="191" r="155" fill="url(#LG2)"/>
108. circle cx="191" cy="191" r="130" fill="#53d2c5"/>
109. circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
111. g width="200" height="200"
112. transform="translate(100, 100)">
113. animateTransform attributeName="transform" type="translate" dur="4s"
114. values="191,191;191,191" repeatCount="indefinite"/>
115. animateTransform attributeName="transform" additive="sum" type="rotate"
116. dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
118. rect x="0" y="0"
119. width="22" height="70"
120. fill="url(#arrow1)"
121. fill-opacity="0.5"
122. filter="url(#blurred-source)"
123. rx="10" ry="10"
124. transform="translate(-11, -15)" />
125. g>
127. g width="200" height="200"
128. transform="translate(100, 100)">
129. animateTransform attributeName="transform" type="translate" dur="4s"
130. values="191,191;191,191" repeatCount="indefinite"/>
131. animateTransform attributeName="transform" additive="sum" type="rotate"
132. dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
134. rect x="0" y="0"
135. width="20" height="70"
136. fill="url(#arrow1)"
137. rx="10" ry="10"
138. transform="translate(-10, -10)" />
139. g>
141. g width="200" height="200"
142. transform="translate(100, 100)">
143. animateTransform attributeName="transform" type="translate" dur="4s"
144. values="191,191;191,191" repeatCount="indefinite"/>
145. animateTransform attributeName="transform" additive="sum" type="rotate"
146. dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
148. rect x="0" y="0"
149. width="18" height="104"
150. fill="url(#arrow1)"
151. fill-opacity="0.8"
152. filter="url(#blurred-source)"
153. 

     声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html5离线存储有哪些
• 深入解析asp.net中mvc4自定义404页面（...
• h5新增标签audio与video的使用
• 你值得了解的HTTP缓存机制（代码详解）
• 利用纯html5绘制出来的一款非常漂亮的时钟_ht...

• 框架初始类文件
• 前端应用
• MVC目录结构规划
• 博客前后台功能介绍

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习