Une très belle horloge dessinée en utilisant de pures compétences de tutoriel HTML5_html5

Aujourd'hui, j'aimerais partager avec vous une très belle horloge implémentée en pur HTML5. L'intégralité de l'interface est dessinée avec html5. Jetons un coup d'œil aux rendus :

Code d'implémentation.

　code htm :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div classe="conteneur" >  
2.         <svg largeur="600"  hauteur="600" classe='svg-element'>  
3.        
4.     <filtre id="f4"  x="-50%" y ="-20%" largeur="200%" hauteur="140%">  
5.       <feOffset résultat="offOut"  in="SourceAlpha" dx="0" dy="25" / >  
6.       <feGaussianBlur résultat="blurOut"  in="offOut" stdDeviation="10" />  
7.       <feBlend dans="SourceGraphic"  in2="blurOut" mode="normal" />  
8.     filtre>  
9.        
10.   <filtre id="flou- source" x="-50%" y="-20%" largeur="200%" hauteur="140%">  
11.     <feFlou gaussien dans="couleur"  stdDeviation="5" résultat="blurOut"/>  
12.   filtre>  
13.         
14.     <filter id="encart- ombre">  
15.         <feOffset dx="0"  dy="10"/>                                                            
16.         <feGaussianBlur stdDeviation="15"   résultat="décalage-flou"/>                             
17.         <feComposite opérateur="out"  in="SourceGraphic" in2="décalage-flou" résultat="inverse"/>   
18.         <feFlood couleur-inondation=" noir" inondation-opacité="1" résultat="couleur"/>                      
19.         <feComposite opérateur="in"  in="couleur" in2="inverse" résultat="ombre"/>                
20.         <feComponentTransfer dans="ombre"  résultat="ombre">                                    < ;!-- Opacité de l'ombre -->  
21.             <feFuncA type="linéaire"  pente="1"/>  
22.         feComponentTransfer>  
23.         <feComposite opérateur="plus"  dans="ombre" dans2="SourceGraphic"/>                      
24.     filtre>  
25.        
26.     <filter id="encart- ombre-grande">  
27.         <feOffset dx="0"  dy="4"/>                                                            
28.         <feGaussianBlur stdDeviation="2"   résultat="décalage-flou"/>                             
29.         <feComposite opérateur="out"  in="SourceGraphic" in2="décalage-flou" résultat="inverse"/>   
30.         <feFlood couleur-inondation=" blanc" inondation-opacité="1" résultat="couleur"/>                      
31.         <feComposite opérateur="in"  in="couleur" in2="inverse" résultat="ombre"/>                
32.         <feComponentTransfer dans="ombre"  résultat="ombre">                                    < ;!-- Opacité de l'ombre -->  
33.             <feFuncA type="linéaire"  pente="0,5"/>  
34.         feComponentTransfer>  
35.         <feComposite opérateur="plus"  dans="ombre" dans2="SourceGraphic"/>                      
36.     filtre>  
37.        
38.     <filter id="encart- ombre-grand-fond">  
39.         <feOffset dx="0"  dy="10"/>                                                            
40.         <feGaussianBlur stdDeviation="2"   résultat="décalage-flou"/>                             
41.         <feComposite opérateur="out"  in="SourceGraphic" in2="décalage-flou" résultat="inverse"/>   
42.         <feFlood couleur-inondation=" #FFF" inondation-opacité="1" résultat ="couleur"/>                      
43.         <feComposite opérateur="in"  in="couleur" in2="inverse" résultat="ombre"/>                
44.         <feComponentTransfer dans="ombre"  résultat="ombre">                                    < ;!-- Opacité de l'ombre -->  
45.             <feFuncA type="linéaire"  pente="0,5"/>  
46.         feComponentTransfer>  
47.         <feComposite opérateur="plus"  dans="ombre" dans2="SourceGraphic" résultat='final-shadow-1'/>                       
48.          
49.         <feOffset dx="0"  dy="-12"/>                                                            
50.         <feGaussianBlur stdDeviation="2"   résultat="décalage-flou"/>                             
51.         <feComposite opérateur="out"  dans="final-shadow-1" dans2="décalage-flou" résultat="inverse"/ >   
52.         <feFlood couleur-inondation=" #69c39b" inondation-opacité="1" résultat ="couleur"/>                      
53.         <feComposite opérateur="in"  in="couleur" in2="inverse" résultat="ombre"/>                
54.         <feComponentTransfer dans="ombre"  résultat="ombre">                                    < ;!-- Opacité de l'ombre -->  
55.             <feFuncA type="linéaire"  pente="0,5"/>  
56.         feComponentTransfer>  
57.         <feComposite opérateur="plus"  dans="ombre" dans2="final-shadow-1" résultat='final-shadow-2'/>                       
58.          
59.     filtre>  
60.        
61.     <linearGradient id="LG"   
62.                     gradientTransform="rotation(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="rotation(-90 .5 .5)">         
69.       <stop id="s0"  offset="0.07" stop-color ="#fdfefe"/>  
70.       <stop id="s1"  décalage="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="rotation(-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="rotation(-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="centre- bouton-outter"  
88.                     gradientTransform="rotation(90 .5 .5)">
89.       <stop id="s0"  offset="0" stop-color ="#ffffefe"/>  
90.       <stop id="s2"  offset="1" stop-color ="#86ecdb"/>  
91.     linearGradient>  
92.        
93.         <linearGradient id="centre- bouton-intérieur"  
94.                     gradientTransform="rotation(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 transformer="traduire( 50, 20)">  
100.          
101.       <rect x="0"  y="0"  
102.           largeur="382" hauteur="382"    
103.           fill="url(#LG)"  
104.           filtre="url(#inset-shadow-big-bottom)"  
105.           rx="75" ry="105" />  
106.        
107.     <cercle cx="191"  cy="191" r="155" fill="url(#LG2)"/>   
108.     <cercle cx="191"  cy="191" r="130" fill="#53d2c5"/>   
109.     <cercle cx="191"  cy="191" r="130" fill="#53d2c5"  filtre="url(#inset-shadow)" />  
110.        
111.       <g largeur="200"  hauteur="200"  
112.        transform="translate(100, 100)">  
113.        <animateTransform attributeName="transform"  type="translate" dur="4s"    
114.        valeurs="191 191;191 191" repeatCount ="indéfini"/>  
115.        <animateTransform attributeName="transform"  additif="somme" type="faire pivoter"    
116.        dur="86400s" valeurs="200, 0 0;550 0 0" repeatCount="indéfini" />  
117.          
118.           <rect x="0"  y="0"  
119.                 largeur="22" hauteur="70"    
120.                 fill="url(#arrow1)"  
121.                 fill-opacity="0.5"  
122.                 filtre="url(#blurred-source)"  
123.                 rx="10" ry="10"  
124.                 transform="translate(-11, -15)" /> ;  
125.     g>     
126.          
127.     <g largeur="200"  hauteur="200"  
128.        transform="translate(100, 100)">  
129.        <animateTransform attributeName="transform"  type="translate" dur="4s"    
130.        valeurs="191 191;191 191" repeatCount ="indéfini"/>  
131.        <animateTransform attributeName="transform"  additif="somme" type="faire pivoter"    
132.        dur="86400s" valeurs="200, 0 0;550 0 0" repeatCount="indéfini" />  
133.          
134.           <rect x="0"  y="0"  
135.                 largeur="20" hauteur="70"    
136.                 fill="url(#arrow1)"  
137.                 rx="10" ry="10"  
> ;
138.        g>  
139.               <g
 
140. largeur
=
141. "200"  hauteur="200"          transform="translate(100, 100)">
  
142.        <animateTransform attributeName
=
143. "transform"  type="translate" dur="4s"            valeurs="191 191;191 191" 
repeatCount
144. ="indéfini"/>          <animateTransform attributeName
=
145. "transform"  additif="somme" type="faire pivoter"            dur="3600s" 
valeurs
146. ="90,0 0;450 0 0" repeatCount="indéfini" />                   <rect
 
147. x
=
148. "0"  y="0"  
149. 幅="18" 高さ=「104」
150. fill="url(#arrow1)"
151. fill-opacity="0.8"
152. フィルター="url(#blurred-source)"