最新赞助活动温馨提示：自愿赞助服务器费用，学生和没有工作的整站资源免费下载！
>讨论社区 >利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧-H5教程
更多 > 最新话题 /New
11-04 微信登录不了网站
09-13 咋不能充值啊
09-13 摸鱼早报 · 星期五 2024-09-13
09-09 摸鱼早报 · 星期一 2024-09-09
09-06 摸鱼早报 · 星期五2024-09-06
09-05 摸鱼早报 · 星期四 2024-09-05
09-04 摸鱼早报 · 星期三 2024-09-04
09-03 摸鱼早报 · 星期二 2024-09-03
09-02 摸鱼早报 · 星期一 2024-09-02
08-30 摸鱼早报 · 星期五 2024-08-30
更多 > 标签云 /Tag
小程序公众号MysqlHtml5JQueryJavaScriptBootstrap视频教程前端工具微信ThinkphpAjaxCurl表单JSON手机后台插件
更多 > 相关网址 /Relative
08-18 wordpress新手入门到精通视频教程教程
08-18 二当家的“精品源码”由入门到精通教程视频教程
05-29 用wamp环境测试怎么更改jpeg呢？
05-10 购物车如何循环遍历数据库信息并动态计算金额
06-06 现在工作不好找啊
05-20 响应式的网站是怎么做的
08-18 Joomla 2.5 从入门到精通视频教程
10-31 HTML5的表单中关于所有type类型的详细介绍-H5教程
10-31 html5实现文字轮滚的示例代码-H5教程
10-31 HTML5-Geolocation APIs的示例代码-H5教程
10-30 HTML5/CSS3专题 canvas 模拟实现电子彩票刮刮乐示例代码（图）-H5教程
10-31 html5实现各种图片样式实例用法汇总-H5教程
10-31 分享用canvas实现水流和水池动画的代码-H5教程
10-30 HTML5第一人称射击游戏实现的代码分享-H5教程
10-30 处理HTML5新标签的浏览器兼容版问题-H5教程
10-30 hwSlider-内容滑动切换效果（一） -H5教程
10-31 h5canvas实现黑客帝国矩形阵效果代码-H5教程
10-31 phonegap进行提示操作的具体示例代码分享-H5教程
10-31 xhtml和html有什么区别？-H5教程
10-30 详细介绍html5小游戏制作思路的代码实例-H5教程
头像

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

来源：http://erdangjiade.com/topic/134511.html H5程序员 2017-10-19 10:30浏览(249)

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

　　实现的代码。

　　htm代码：

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

  1. <p 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"/> <!-- Shadow Offset -->
  16. <feGaussianBlur stdDeviation="15" result="offset-blur"/> <!-- Shadow Blur -->
  17. <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  18. <feFlood flood-color="black" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
  19. <feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
  20. <feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
  21. <feFuncA type="linear" slope="1"/>
  22. </feComponentTransfer>
  23. <feComposite operator="over" in="shadow" in2="SourceGraphic"/> <!-- Put shadow over original object -->
  24. </filter>
  26. <filter id="inset-shadow-big">
  27. <feOffset dx="0" dy="4"/> <!-- Shadow Offset -->
  28. <feGaussianBlur stdDeviation="2" result="offset-blur"/> <!-- Shadow Blur -->
  29. <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  30. <feFlood flood-color="white" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
  31. <feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
  32. <feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
  33. <feFuncA type="linear" slope="0.5"/>
  34. </feComponentTransfer>
  35. <feComposite operator="over" in="shadow" in2="SourceGraphic"/> <!-- Put shadow over original object -->
  36. </filter>
  38. <filter id="inset-shadow-big-bottom">
  39. <feOffset dx="0" dy="10"/> <!-- Shadow Offset -->
  40. <feGaussianBlur stdDeviation="2" result="offset-blur"/> <!-- Shadow Blur -->
  41. <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  42. <feFlood flood-color="#FFF" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
  43. <feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
  44. <feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
  45. <feFuncA type="linear" slope="0.5"/>
  46. </feComponentTransfer>
  47. <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/> <!-- Put shadow over original object -->
  49. <feOffset dx="0" dy="-12"/> <!-- Shadow Offset -->
  50. <feGaussianBlur stdDeviation="2" result="offset-blur"/> <!-- Shadow Blur -->
  51. <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  52. <feFlood flood-color="#69c39b" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
  53. <feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
  54. <feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
  55. <feFuncA type="linear" slope="0.5"/>
  56. </feComponentTransfer>
  57. <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/> <!-- Put shadow over original object -->
  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)"
标签： 公众号Html5Bootstrap
HTML5 video播放器全屏(fullScreen)方法实例_html5教程技巧-H5教程
浅谈html5 响应式布局_html5教程技巧-H5教程
评论（0）
头像

友情提示：垃圾评论一律封号 加我微信：826096331拉你进VIP群学习群

1 2