Jam yang sangat cantik dilukis menggunakan kemahiran tutorial HTML5_html5 tulen

Hari ini saya ingin berkongsi dengan anda jam yang sangat cantik yang dilaksanakan dalam HTML5 tulen. Keseluruhan antara muka dilukis dengan html5. Mari lihat pemaparan:

Kod pelaksanaan.

　kod htm:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div kelas="bekas" >  
2.         <svg lebar="6  tinggi="600" kelas='svg-element'>  
3.        
4.     <penapis id="f4"  x="-50%" y ="-20%" lebar="200%" tinggi="140%">  
5.       <feOffset hasil="off  dalam="SourceAlpha" dx="0" dy="25" / >  
6.       <feGaussianBlur hasil=<🎜">"  dalam="offOut" stdSisihan="10" />  
7.       <feBlend dalam="Source  dalam2="blurOut" mod="biasa" />  
8.     penapis>  
9.        
10.   <tapis id="kabur- sumber" x="-50%" y="-20%" lebar="200%" tinggi="140%">  
11.     <feGaussianBlur dalam="warna"  stdSisihan="5" hasil="blurOut"/>  
12.   penapis>  
13.         
14.     <penapis id="inset- bayang">  
15.         <feOffset dx=<"🎜>"  dy="10"/>                                                             
16.         <feGaussianBlur stdSisihan="🎜"><🎜   hasil="offset-blur"/>                                                           🎜>           <
17. feComposite operator=<"🎜>"  dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>            <
feFlood
18.  warna banjir=<🎜"><🎜 hitam" kelegapan banjir="1" hasil 🎜>="warna"/>                       
19.         <feComponentTransfer dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->  
             
20. <feFuncA taip=<🎜">  cerun="1"/>           
21. feComponentTransfer>           
22. <feComposite operator="  dalam="bayangan" dalam2=< . 🎜>     penapis>  
       
23.     <penapis 
id
24. =
"inset- bayang-bayang"
25. >           <feOffset dx=<"🎜>"
26.  dy="4"/>                                                      
27.         <feGaussianBlur stdSisihan"=><🎜   hasil="offset-blur"/>                                                           🎜>           
28. <feComposite operator=<"🎜>"  dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>
             <
29. feFlood warna banjir=<🎜"><🎜 putih" kelegapan banjir="1" hasil 🎜>="warna"/>                                <feComponentTransfer 
30. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
taip
31. =<🎜">  cerun="0.5"/>           feComponentTransfer>  
33.         <feComposite operator="  dalam="bayangan" dalam2=< . 🎜>     penapis>  
34.             <penapis
35.  id
36. ="inset- bayang-besar-bawah">           <feOffset dx
37. =<"🎜>"  dy="10"/>
                                                                      <feGaussianBlur stdSisihan"=
38. ><🎜   hasil="offset-blur"/>                                                           🎜>           <feComposite operator=<"🎜>"
 
39. dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>            <feFlood warna banjir=<🎜"><🎜 #FFF" 
kelegapan banjir
40. ="1" hasil ="warna"/>                       
41.         <feComponentTransfer dalam="><">  hasil="bayangan">
                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                
42. <feFuncA taip=<🎜">  cerun="0.5"/>           
43. feComponentTransfer>           
44. <feComposite operator="  dalam="bayangan" dalam2="SourceGraphic" hasil='final-shadow-1'/>                                 
45.         
46. <feOffset dx=<"🎜>"  dy="-12"/>                                                      
47.         <feGaussianBlur stdSisihan"=><🎜   hasil="offset-blur"/>                                                           🎜>           
48. <feComposite operator=<"🎜>"  dalam="bayang-akhir-1" dalam2="offset-blur" hasil="terbalik"/ >
             <
49. feFlood warna banjir=<🎜"><🎜 #69c39b" kelegapan banjir="1" hasil ="warna"/>                                <feComponentTransfer 
50. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
taip
51. =<🎜">  cerun="0.5"/>           feComponentTransfer>  
53.         <feComposite operator="  dalam="bayangan" dalam2="bayang-akhir-1" hasil='bayang-akhir-2'/>                       
54.          
55.     penapis>  
56.        
57.     <linearGradient id="LG"   
58.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
      
59. <berhenti id="s0"  mengimbangi="0" warna henti ="#d6f8e9"/>
         
60. <berhenti id="s2"  mengimbangi="1" warna henti ="#9ee1c4"/>  
    
61. linearGradient>  
       
    
63. <linearGradient id="LG2"   
                    
64. Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >                
<
65. berhenti id="s0"  mengimbangi="0.07" warna henti ="#fdfefe"/>  
66.       <berhenti id="s1"  mengimbangi="0.5" warna henti ="#98e2c2"/>  
67.       <berhenti id="s2"  mengimbangi="0.8" warna henti ="#79c9a7"/>  
68.       <berhenti id="s3"  mengimbangi="1" warna henti ="#5fbc95"/>  
69.     linearGradient>  
70.        
71.     <linearGradient id="anak panah1"   
72.                     Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >         
      
73. <berhenti id="s0"  mengimbangi="0" warna henti ="#07594f"/>  
      
74. <berhenti id="s2"  mengimbangi="1" warna henti ="#01443c"/>  
    
75. linearGradient>  
       
    
77. <linearGradient id=<🎜">"anak panah                        
78. Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >         
79.       <berhenti id="s0"  mengimbangi="0" warna henti ="#fd5959"/>  
80.       <berhenti id="s2"  mengimbangi="1" warna henti ="#fe7c7c"/>  
81.     linearGradient>  
82.        
83.     <linearGradient id="center- tombol luar"  
84.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
85.       <berhenti id="s0"  mengimbangi="0" warna henti ="#fffefe"/>  
86.       <berhenti id="s2"  mengimbangi="1" warna henti ="#86ecdb"/>  
87.     linearGradient>  
88.        
89.         <linearGradient id=" tombol-dalaman"  
90.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
      
91. <berhenti id="s0"  mengimbangi="0" warna henti ="#a0dcd2"/>
  
92.       <berhenti id="s2"  mengimbangi="1" warna henti ="#dff9ef"/>  
93.     linearGradient>  
94.        
95.     <g transformasi="translate( 50, 20)">  
96.          
97.       <tepat x="0"  y="0"  
98.           lebar="382" tinggitinggi<🎜 🎜>"382"    
99.           isi="url(#LG)"  
100.           penapis="url(#inset-shadow-big-bottom)"  
101.            rx="75" ry<= 🎜>"105" />  
102.        
103.     <bulatan cx="191"  cy="191" r="155" isi="url(#LG2)"/>   
104.     <bulatan cx="191"  cy="191" r="130" isi="#53d2c5"/>   
105.     <bulatan cx="191"  cy="191" r="130" isi="#53d2c5"  penapis="url(#inset-shadow)" />  
106.        
107.       <g lebar="200"  tinggi="200"  
108.        transformasi="terjemah(100, 100)">   >
109.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"            
110. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          <
111. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur=
112. "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />                        
113. <betul
114.  x="0"  y="0"                   lebar=
115. "22" =tinggi 🎜>"70"                     isi
=
116. "url(#arrow1)"  
117.                 kelegapan isian="0.5"  
118.                 penapis="url(#blurred-source)"  
<🎜
119.                 rx="10" ryry>"10"  
120.                 transformasi="terjemah(-11, -15)" ><&🎜 ;  
121.     g>
     
122.          
123.     <g lebar="200"  tinggi="200"  
124.        transformasi="terjemah(100, 100)">   >
125.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"            
126. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          <
127. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur=
128. "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />                        
129. <betul
130.  x="0"  y="0"  
131.                 lebar="20" =tinggi 🎜>"70"    
132.                 isi="url(#arrow1)"  
133.                 rx="10" ryry>"10"
  
134.                 transformasi="terjemah(-10, -10)" <&🎜 ;  
135.     g>  
136.        
137.       <g lebar="200"  tinggi="200"  
138.        transformasi="terjemah(100, 100)">   >
139.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"    
       
140. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          
<
141. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur
=
142. "3600s" nilai<= 🎜>"90,0 0;450 0 0" bilangan berulang="tidak tentu" />                   
143. <tepat
144.  x="0"  y="0"  
145.             Breite="18" Höhe="104"    
146.             fill="url(#arrow1)"  
147.             Füll-Deckkraft="0,8"  
148.             filter="url(#blurred-source)"