利用纯html5绘制出来的一款非常漂亮的时钟

利用纯html5绘制出来的一款非常漂亮的时钟

　　今天给大家分享一款非常漂亮的纯html5实现的时钟。

整个界面都由html5绘制而成。

一起看下效果图：

　　实现的代码。

　　htm代码：

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

1. <div class="container">  
2.         <svg width="600" height="600" class='svg-element'>  
3.        
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>  
9.        
10.   <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">  
11.     <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>  
12.   </filter>  
13.         
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>  
25.        
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>  
37.        
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 -->  
48.          
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 -->  
58.          
59.     </filter>  
60.        
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>  
66.        
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>  
74.        
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>  
80.        
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>  
86.        
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>  
92.        
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>  
98.        
99.     <g transform="translate(50, 20)">  
100.          
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" />  
106.        
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)" />  
110.        
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"/>  
117.          
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>     
126.          
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"/>  
133.          
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>  
140.        
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"/>  
147.          
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.             rx="8" ry="8"  
154.             transform="translate(-9, -15)"> />  
155.     </g>      
156.          
157.     <g width="200" height="200"  
158.        transform="translate(100, 100)">  
159.        <animateTransform attributeName="transform" type="translate" dur="4s"    
160.        values="191,191;191,191" repeatCount="indefinite"/>  
161.        <animateTransform attributeName="transform" additive="sum" type="rotate"    
162.        dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>  
163.          
164.       <rect x="0" y="0"  
165.             width="16" height="104"    
166.             fill="url(#arrow1)"  
167.             rx="8" ry="8"  
168.             transform="translate(-8, -8)"> />  
169.     </g>  
170.        
171.      <g width="200" height="200">  
172.        <animateTransform attributeName="transform" type="translate" dur="4s"    
173.        values="195,195;190,195" repeatCount="indefinite"/>  
174.        <animateTransform attributeName="transform" additive="sum" type="rotate"    
175.        dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>  
176.          
177.       <rect class="arrowRed"  
178.             x="0" y="0"  
179.             width="8" height="120"    
180.             fill="url(#arrowRed)"  
181.             filter="url(#blurred-source)"  
182.             fill-opacity="0.5"  
183.             rx="3" ry="3"  
184.             transform="translate(-3, -20)"/>  
185.     </g>  
186.          
187.        
188.     <g width="200" height="200"  
189.        transform="translate(100, 100)">  
190.        <animateTransform attributeName="transform" type="translate" dur="4s"    
191.        values="191,191;191,191" repeatCount="indefinite"/>  
192.        <animateTransform attributeName="transform" additive="sum" type="rotate"    
193.        dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>  
194.          
195.       <rect class="arrowRed"  
196.             x="0" y="0"  
197.             width="6" height="134"    
198.             fill="url(#arrowRed)"  
199.             rx="3" ry="3"  
200.             transform="translate(-3, -20)"/>  
201.     </g>  
202.          
203.   
204.        
205.            
206.     <g width="200" height="200"  
207.        transform="translate(191, 191)">  
208.          
209.       <circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>  
210.       <circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>  
211.     </g>  
212.          
213. <!--      <path d="M 200 20    
214.                 200 40    
215.                 180 30 z">-->  
216.   
217.       </g>  
218.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .container   
2.         {   
3.             text-align: center;   
4.             width: 100%;   
5.             margin-top: 20px;   
6.             padding: 20px;   
7.         }