Eine sehr schöne Uhr, die mit reinen HTML5_html5-Tutorial-Fähigkeiten gezeichnet wurde

Heute möchte ich mit Ihnen eine sehr schöne Uhr teilen, die in reinem HTML5 implementiert ist. Die gesamte Oberfläche ist mit HTML5 gezeichnet. Werfen wir einen Blick auf die Renderings:

Implementierungscode.

　HTM-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div class="container" >  
2.         <svg width="600"  Höhe="600" Klasse='svg-element'>  
3.        
4.     <filter id="f4"  x="-50%" y ="-20%" Breite="200%" Höhe="140%">  
5.       <feOffset Ergebnis="offOut"  in="SourceAlpha" dx="0" dy="25" / >  
6.       <feGaussianBlur Ergebnis="blurOut"  in="offOut" stdDeviation="10" />  
7.       <feBlend in="SourceGraphic"  in2="blurOut" Modus="normal" />  
8.     Filter>  
9.        
10.   <filter id="unscharf- Quelle" x="-50%" y="-20%" Breite="200%" Höhe="140%">  
11.     <feGaussianBlur in="color"  stdDeviation="5" Ergebnis="blurOut"/>  
12.   Filter>  
13.         
14.     <filter id="inset- Schatten">  
15.         <feOffset dx="0"  dy="10"/>                                                            
16.         <feGaussianBlur stdDeviation="15"   Ergebnis="offset-blur"/>                            
17.         <feComposite Operator="out"  in="SourceGraphic" in2="offset-blur" result="inverse"/>   
18.         <feFlood flood-color=" schwarz" Flood-Opacity="1" Ergebnis="color"/>                     >  
19.         <feComposite Operator="in"  in="Farbe" in2="invers" Ergebnis="Schatten"/>                 
20.         <feComponentTransfer in="shadow"  Ergebnis="Schatten">                                  & lt ;!-- Schattendeckkraft -->  
21.             <feFuncA Typ="linear"  Steigung="1"/>  
22.         feComponentTransfer>  
23.         <feComposite Operator="over"  in="Schatten" in2="SourceGraphic"/>                    🎜>     
24. Filter>          
25.     <
26. filter id="inset- schattengroß“>           <
27. feOffset dx="0"  dy="4"/>                                                            
28.         <feGaussianBlur stdDeviation="2"   Ergebnis="offset-blur"/>                            
29.         <feComposite Operator="out"  in="SourceGraphic" in2="offset-blur" result="inverse"/>   
30.         <feFlood flood-color=" weiß" Flood-Opacity="1" Ergebnis="color"/>                     >           
<
31. feComposite Operator="in"  in="Farbe" in2="invers" Ergebnis="Schatten"/>                          
<
32. feComponentTransfer in="shadow"  Ergebnis="Schatten">                                  & lt ;!-- Schattendeckkraft -->               <
33. feFuncA Typ="linear"  Steigung="0,5"/>           feComponentTransfer>  
34.         <feComposite Operator="over"  in="Schatten" in2="SourceGraphic"/>                    🎜>     
35. Filter>          
36.     <
37. filter id="inset- schatten-big-bottom">           <
38. feOffset dx="0"  dy="10"/>                                                                     <
39. feGaussianBlur stdDeviation="2"   Ergebnis="offset-blur"/>                                     <
40. feComposite Operator="out"  in="SourceGraphic" in2="offset-blur" result="inverse"/>            <
41. feFlood flood-color=" #FFF" Flood-Opacity="1" Ergebnis ="color"/>                     🎜>  
42.         <feComposite Operator="in"  in="Farbe" in2="invers" Ergebnis="Schatten"/>                 
43.         <feComponentTransfer in="shadow"  Ergebnis="Schatten">                                  & lt ;!-- Schattendeckkraft -->  
44.             <feFuncA Typ="linear"  Steigung="0,5"/>  
45.         feComponentTransfer>  
46.         <feComposite Operator="over"  in="Schatten" in2="SourceGraphic" result='final-shadow-1'/>                               
        
47. <
feOffset
48.  dx="0"  dy="-12"/>                                                           
49.         <feGaussianBlur stdDeviation="2"   Ergebnis="offset-blur"/>                            
50.         <feComposite Operator="out"  in="final-shadow-1" in2="offset-blur" Ergebnis="invers"/ >   
51.         <feFlood flood-color=" #69c39b" Flood-Opacity="1" Ergebnis ="color"/>                     🎜>           
<
52. feComposite Operator="in"  in="Farbe" in2="invers" Ergebnis="Schatten"/>                          
<
53. feComponentTransfer in="shadow"  Ergebnis="Schatten">                                  & lt ;!-- Schattendeckkraft -->               <
54. feFuncA Typ="linear"  Steigung="0,5"/>           feComponentTransfer>  
55.         <feComposite Operator="over"  in="Schatten" in2="final-shadow-1" Ergebnis='final-shadow-2'/>                              
    
Filter
57. >          
    
58. <
linearGradient
59.  id="LG"                        
      
60. <stop id="s0"
 
61. Offset="0" Stoppfarbe ="#d6f8e9"/>         <stop id="s2"
 
62. Offset="1" Stoppfarbe ="#9ee1c4"/>       linearGradient>          
63.     <linearGradient id
=
64. "LG2"
  
65.                     >                <stop id
=
66. "s0"  Offset="0,07" 
Stoppfarbe
67. ="#fdfefe"/>  
68.       <stop id="s1"  Offset="0,5" Stoppfarbe ="#98e2c2"/>  
69.       <stop id="s2"  Offset="0,8" Stoppfarbe ="#79c9a7"/>  
70.       <stop id="s3"  Offset="1" Stoppfarbe ="#5fbc95"/>  
71.     linearGradient>  
72.        
73.     <linearGradient id="arrow1"   
74.                     >                <stop 
id
75. ="s0"  Offset="0" Stoppfarbe ="#07594f"/>         <stop 
id
76. ="s2"  Offset="1" Stoppfarbe ="#01443c"/>       linearGradient>
  
77.             <
linearGradient
78.  
id
79. ="arrowRed"                        >         
80.       <stop id="s0"  Offset="0" Stoppfarbe ="#fd5959"/>  
81.       <stop id="s2"  Offset="1" Stoppfarbe ="#fe7c7c"/>  
82.     linearGradient>  
83.        
84.     <linearGradient id="center- knauf-außen"  
85.                            <stop 
id
86. ="s0"  Offset="0" Stoppfarbe ="#ffffefe"/>         <stop 
id
87. ="s2"  Offset="1" Stoppfarbe ="#86ecdb"/>       linearGradient>
  
88.                 <
linearGradient
89.  
id
90. ="center- knauf-innen"                              <
stop
91.  id="s0"  Offset
=
92. "0" Stoppfarbe ="#a0dcd2"/>  
93.       <stop id="s2"  Offset="1" Stoppfarbe ="#dff9ef"/>  
94.     linearGradient>  
95.        
96.     <g transformieren="translate( 50, 20)">  
97.          
98.       <rect x="0"  y="0"  
99.           Breite="382" Höhe="382"    
100.           fill="url(#LG)"  
101.           filter="url(#inset-shadow-big-bottom)"  
102.           rx="75" ry="105" />  
103.        
104.     <Kreis cx="191"  cy="191" r="155" fill="url(#LG2)"/>   
105.     <Kreis cx="191"  cy="191" r="130" fill="#53d2c5"/>   
106.     <Kreis cx="191"  cy="191" r="130" fill="#53d2c5"  filter="url(#inset-shadow)" />  
107.        
108.       <g width="200"  Höhe="200"  
109.        transform="translate(100, 100)">  
110.        <animateTransform attributeName="transform"  type="translate" dur="4s"    
111.        values="191,191;191,191" repeatCount ="unbestimmt"/>  
112.        <animateTransform attributeName="transform"  Additiv="Summe" Typ="drehen"    
113.        Dur="86400s" Werte="200, 0 0;550 0 0" repeatCount="unbestimmt" />  
114.          
115.           <rect x="0"  y="0"  
116.                 🎜>"70"                     
117.                                                   🎜>"10"  
118.                 ;       g
119. >                    <g width
120. ="200"  Höhe="200"  
121.        transform="translate(100, 100)">  
122.        
123. <animateTransform attributeName="transform"  type="translate" dur=
124. "4s"            values="191,191;191,191"
125.  repeatCount ="unbestimmt"/>          <animateTransform attributeName="transform"  Additiv=
126. "Summe" Typ="drehen"            Dur="86400s"
127.  Werte="200, 0 0;550 0 0" repeatCount="unbestimmt" />                       <rect 
128. x="0"  y="0"  
129.                 🎜>"70"                                      🎜>"10"                   ;
  
130.     g>
  
131.               <g width=
"200"
132.  Höhe="200"          
transform
133. ="translate(100, 100)">  
       
134. <
animateTransform
135.  attributeName="transform"  type="translate" dur="4s"
    
136.        values="191,191;191,191" 
repeatCount
137. ="unbestimmt"/>          <animateTransform attributeName="transform"  Additiv="Summe"
 
138. Typ="drehen"            Dur="3600s" 
Werte
139. ="90,0 0;450 0 0" repeatCount="unbestimmt" />                   <rect x
=
140. "0"  y="0"  
141.             largeur="18" hauteur="104"    
142.             fill="url(#arrow1)"  
143.             fill-opacity="0.8"  
144.             filtre="url(#blurred-source)"