純粋な HTML5_html5 チュートリアルのスキルを使用して描画された非常に美しい時計

今日は、純粋な HTML5 で実装された非常に美しい時計を共有したいと思います。インターフェイス全体は html5 で描画されます。レンダリングを見てみましょう:

実装コード。

HTML コード:

XML/HTML コードコンテンツをクリップボードにコピー

1. <div クラス="コンテナ" >
2. <svg 幅="600" 身長="600" クラス= の svg 要素>
4. <フィルター id="f4" x="-50%" y ="-20%" 幅="200%" 身長="140%">
5. <feOffset 結果="offOut" in="SourceAlpha" dx="0" dy="25" / >
6. <feGaussianBlur 結果="blurOut" in="offOut" stdDeviation="10" />
7. <feBlend in="ソースグラフィック" in2="blurOut" mode=「通常」 />
8. フィルター>
10. <フィルター id="ぼかし-ソース" x="-50%" y="-20%"幅="200%" 身長="140%">
11. <feGaussianBlur in="カラー" stdDeviation="5" 結果=「ぼかしアウト」/>
12. フィルタ>
14. <フィルター id="inset-シャドウ">
15. <feOffset dx="0" dy="10"/>
16. <feGaussianBlur stdDeviation="15" 結果="オフセットブラー"/>
17. <feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
18. <feFlood フラッドカラー=" black" フラッド不透明度="1" 結果="色"/>
19. <feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
20. <feComponentTransfer in="シャドウ" 結果="シャドウ"> < ;!-- 影の不透明度 -->
21. <feFuncA type="linear" 傾き="1"/>
22. feComponentTransfer>
23. <feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic"/>
24. フィルター>
26. <フィルター id="inset-シャドウビッグ">
27. <feOffset dx="0" dy="4"/>
28. <feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
29. <feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
30. <feFlood フラッドカラー="白" フラッド不透明度="1" 結果="色"/>
31. <feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
32. <feComponentTransfer in="シャドウ" 結果="シャドウ"> < ;!-- 影の不透明度 -->
33. <feFuncA type="linear" 傾き="0.5"/>
34. feComponentTransfer>
35. <feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic"/>
36. フィルター>
38. <フィルター id="inset-シャドウビッグボトム">
39. <feOffset dx="0" dy="10"/>
40. <feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
41. <feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
42. <feFlood フラッドカラー=" #FFF" フラッド不透明度="1" 結果 ="色"/>
43. <feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
44. <feComponentTransfer in="シャドウ" 結果="シャドウ"> < ;!-- 影の不透明度 -->
45. <feFuncA type="linear" 傾き="0.5"/>
46. feComponentTransfer>
47. <feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic" 結果='final-shadow-1'/>
49. <feOffset dx="0" dy="-12"/>
50. <feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
51. <feComposite 演算子="out" in="final-shadow-1" in2=「オフセットブラー」結果=「反転」/ >
52. <feFlood フラッドカラー=" #69c39b" フラッド不透明度="1" 結果 ="色"/>
53. <feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
54. <feComponentTransfer in="シャドウ" 結果="シャドウ"> < ;!-- 影の不透明度 -->
55. <feFuncA type="linear" 傾き="0.5"/>
56. feComponentTransfer>
57. <feComposite 演算子="over" in=「シャドウ」 in2="final-shadow-1" 結果='final-shadow-2'/>
59. フィルター>
61. <linearGradient id="LG"
62. gradientTransform="rotate(90 .5 .5)">
63. <停止 id="s0" オフセット="0" ストップカラー ="#d6f8e9"/>
64. <停止 id="s2" オフセット="1" ストップカラー ="#9ee1c4"/>
65. linearGradient>
67. <linearGradient id="LG2"
68. gradientTransform="rotate(-90 .5 .5)">
69. <停止 id="s0" オフセット="0.07" ストップカラー ="#fdfefe"/>
70. <停止 id="s1" オフセット="0.5" ストップカラー ="#98e2c2"/>
71. <停止 id="s2" オフセット="0.8" ストップカラー ="#79c9a7"/>
72. <停止 id="s3" オフセット="1" ストップカラー ="#5fbc95"/>
73. linearGradient>
75. <linearGradient id="arrow1"
76. gradientTransform="rotate(-90 .5 .5)">
77. <停止 id="s0" オフセット="0" ストップカラー ="#07594f"/>
78. <停止 id="s2" オフセット="1" ストップカラー ="#01443c"/>
79. linearGradient>
81. <linearGradient id="arrowRed"
82. gradientTransform="rotate(-90 .5 .5)">
83. <停止 id="s0" オフセット="0" ストップカラー ="#fd5959"/>
84. <停止 id="s2" オフセット="1" ストップカラー ="#fe7c7c"/>
85. linearGradient>
87. <linearGradient id="center-ノブ-アウター"
88. gradientTransform="rotate(90 .5 .5)">
89. <停止 id="s0" オフセット="0" ストップカラー ="#fffefe"/>
90. <停止 id="s2" オフセット="1" ストップカラー ="#86ecdb"/>
91. linearGradient>
93. <linearGradient id="center-ノブインナー"
94. gradientTransform="rotate(90 .5 .5)">
95. <停止 id="s0" オフセット="0" ストップカラー ="#a0dcd2"/>
96. <停止 id="s2" オフセット="1" ストップカラー ="#dff9ef"/>
97. linearGradient>
99. <g transform="translate( 50, 20)「>
101. <rect x="0" y="0"
102. 幅="382" 高さ=「382」
103. fill="url(#LG)"
104. フィルター="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 幅="200" 身長="200"
112. transform="translate(100, 100)">
113. <animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
114. 値="191,191;191,191" repeatCount ="無期限"/>
115. <animateTransform attributeName="transform" 加法="合計" 型=「回転」
116. 期間="86400s" 値="200, 0 0;550 0 0" repeatCount="無期限" />
118. <rect x="0" y="0"
119. 幅="22" 高さ=「70」
120. fill="url(#arrow1)"
121. 塗りつぶしの不透明度="0.5"
122. フィルター="url(#blurred-source)"
123. rx="10" ry=「10」
124. transform="translate(-11, -15)" /> ;
125. g>
127. <g 幅="200" 身長="200"
128. transform="translate(100, 100)">
129. <animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
130. 値="191,191;191,191" repeatCount ="無期限"/>
131. <animateTransform attributeName="transform" 加法="合計" 型=「回転」
132. 期間="86400s" 値="200, 0 0;550 0 0" repeatCount="無期限" />
134. <rect x="0" y="0"
135. 幅="20" 高さ=「70」
136. fill="url(#arrow1)"
137. rx="10" ry=「10」
138. transform="translate(-10, -10)" /> ;
139. g>
141. <g 幅="200" 身長="200"
142. transform="translate(100, 100)">
143. <animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
144. 値="191,191;191,191" repeatCount ="無期限"/>
145. <animateTransform attributeName="transform" 加法="合計" 型=「回転」
146. 期間="3600s" 値="90,0 0;450 0 0" repeatCount="無期限" />
148. <rect x="0" y="0"
149. 幅="18" 高さ=「104」
150. fill="url(#arrow1)"
151. fill-opacity="0.8"
152. フィルター="url(#blurred-source)"