欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-31 08:28:36
...
  今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图:

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

  实现的代码。

  htm代码:

XML/HTML Code复制内容到剪贴板
  1. div class="container">
  2. svg width="600" height="600" class='svg-element'>
  3. filter id="f4" x="-50%" y="-20%" width="200%" height="140%">
  4. feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />
  5. feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  6. feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  7. filter>
  8. filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">
  9. feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>
  10. filter>
  11. filter id="inset-shadow">
  12. feOffset dx="0" dy="10"/>
  13. feGaussianBlur stdDeviation="15" result="offset-blur"/>
  14. feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
  15. feFlood flood-color="black" flood-opacity="1" result="color"/>
  16. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
  17. feComponentTransfer in="shadow" result="shadow">
  18. feFuncA type="linear" slope="1"/>
  19. feComponentTransfer>
  20. feComposite operator="over" in="shadow" in2="SourceGraphic"/>
  21. filter>
  22. filter id="inset-shadow-big">
  23. feOffset dx="0" dy="4"/>
  24. feGaussianBlur stdDeviation="2" result="offset-blur"/>
  25. feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
  26. feFlood flood-color="white" flood-opacity="1" result="color"/>
  27. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
  28. feComponentTransfer in="shadow" result="shadow">
  29. feFuncA type="linear" slope="0.5"/>
  30. feComponentTransfer>
  31. feComposite operator="over" in="shadow" in2="SourceGraphic"/>
  32. filter>
  33. filter id="inset-shadow-big-bottom">
  34. feOffset dx="0" dy="10"/>
  35. feGaussianBlur stdDeviation="2" result="offset-blur"/>
  36. feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
  37. feFlood flood-color="#FFF" flood-opacity="1" result="color"/>
  38. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
  39. feComponentTransfer in="shadow" result="shadow">
  40. feFuncA type="linear" slope="0.5"/>
  41. feComponentTransfer>
  42. feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>
  43. feOffset dx="0" dy="-12"/>
  44. feGaussianBlur stdDeviation="2" result="offset-blur"/>
  45. feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/>
  46. feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>
  47. feComposite operator="in" in="color" in2="inverse" result="shadow"/>
  48. feComponentTransfer in="shadow" result="shadow">
  49. feFuncA type="linear" slope="0.5"/>
  50. feComponentTransfer>
  51. feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>
  52. filter>
  53. linearGradient id="LG"
  54. gradientTransform="rotate(90 .5 .5)">
  55. stop id="s0" offset="0" stop-color="#d6f8e9"/>
  56. stop id="s2" offset="1" stop-color="#9ee1c4"/>
  57. linearGradient>
  58. linearGradient id="LG2"
  59. gradientTransform="rotate(-90 .5 .5)">
  60. stop id="s0" offset="0.07" stop-color="#fdfefe"/>
  61. stop id="s1" offset="0.5" stop-color="#98e2c2"/>
  62. stop id="s2" offset="0.8" stop-color="#79c9a7"/>
  63. stop id="s3" offset="1" stop-color="#5fbc95"/>
  64. linearGradient>
  65. linearGradient id="arrow1"
  66. gradientTransform="rotate(-90 .5 .5)">
  67. stop id="s0" offset="0" stop-color="#07594f"/>
  68. stop id="s2" offset="1" stop-color="#01443c"/>
  69. linearGradient>
  70. linearGradient id="arrowRed"
  71. gradientTransform="rotate(-90 .5 .5)">
  72. stop id="s0" offset="0" stop-color="#fd5959"/>
  73. stop id="s2" offset="1" stop-color="#fe7c7c"/>
  74. linearGradient>
  75. linearGradient id="center-knob-outter"
  76. gradientTransform="rotate(90 .5 .5)">
  77. stop id="s0" offset="0" stop-color="#fffefe"/>
  78. stop id="s2" offset="1" stop-color="#86ecdb"/>
  79. linearGradient>
  80. linearGradient id="center-knob-inner"
  81. gradientTransform="rotate(90 .5 .5)">
  82. stop id="s0" offset="0" stop-color="#a0dcd2"/>
  83. stop id="s2" offset="1" stop-color="#dff9ef"/>
  84. linearGradient>
  85. g transform="translate(50, 20)">
  86. rect x="0" y="0"
  87. width="382" height="382"
  88. fill="url(#LG)"
  89. filter="url(#inset-shadow-big-bottom)"
  90. rx="75" ry="105" />
  91. circle cx="191" cy="191" r="155" fill="url(#LG2)"/>
  92. circle cx="191" cy="191" r="130" fill="#53d2c5"/>
  93. circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
  94. g width="200" height="200"
  95. transform="translate(100, 100)">
  96. animateTransform attributeName="transform" type="translate" dur="4s"
  97. values="191,191;191,191" repeatCount="indefinite"/>
  98. animateTransform attributeName="transform" additive="sum" type="rotate"
  99. dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
  100. rect x="0" y="0"
  101. width="22" height="70"
  102. fill="url(#arrow1)"
  103. fill-opacity="0.5"
  104. filter="url(#blurred-source)"
  105. rx="10" ry="10"
  106. transform="translate(-11, -15)" />
  107. g>
  108. g width="200" height="200"
  109. transform="translate(100, 100)">
  110. animateTransform attributeName="transform" type="translate" dur="4s"
  111. values="191,191;191,191" repeatCount="indefinite"/>
  112. animateTransform attributeName="transform" additive="sum" type="rotate"
  113. dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
  114. rect x="0" y="0"
  115. width="20" height="70"
  116. fill="url(#arrow1)"
  117. rx="10" ry="10"
  118. transform="translate(-10, -10)" />
  119. g>
  120. g width="200" height="200"
  121. transform="translate(100, 100)">
  122. animateTransform attributeName="transform" type="translate" dur="4s"
  123. values="191,191;191,191" repeatCount="indefinite"/>
  124. animateTransform attributeName="transform" additive="sum" type="rotate"
  125. dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
  126. rect x="0" y="0"
  127. width="18" height="104"
  128. fill="url(#arrow1)"
  129. fill-opacity="0.8"
  130. filter="url(#blurred-source)"
  131. 利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

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

我要评论
  • 利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧
  • 专题推荐

    相关标签: html5时钟