Rumah >hujung hadapan web >Tutorial H5 >Jam yang sangat cantik dilukis menggunakan kemahiran tutorial HTML5_html5 tulen

Jam yang sangat cantik dilukis menggunakan kemahiran tutorial HTML5_html5 tulen

WBOY
WBOYasal
2016-05-16 15:46:581767semak imbas

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"/>            <
  18. feFlood
  19.  warna banjir=<🎜"><🎜 hitam" kelegapan banjir="1" hasil 🎜>="warna"/>                       
  20.         <feComponentTransfer dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->  
  21.              
  22. <feFuncA taip=<🎜">  cerun="1"/>           
  23. feComponentTransfer>           
  24. <feComposite operator="  dalam="bayangan" dalam2=< . 🎜>     penapis>  
  25.        
  26.     <penapis 
  27. id
  28. =
  29. "inset- bayang-bayang"
  30. >           <feOffset dx=<"🎜>"
  31.  dy="4"/>                                                      
  32.         <feGaussianBlur stdSisihan"=><🎜   hasil="offset-blur"/>                                                           🎜>           
  33. <feComposite operator=<"🎜>"  dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>
  34.              <
  35. feFlood warna banjir=<🎜"><🎜 putih" kelegapan banjir="1" hasil 🎜>="warna"/>                                <feComponentTransfer 
  36. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
  37. taip
  38. =<🎜">  cerun="0.5"/>           feComponentTransfer>  
  39.         <feComposite operator="  dalam="bayangan" dalam2=< . 🎜>     penapis>  
  40.             <penapis
  41.  id
  42. ="inset- bayang-besar-bawah">           <feOffset dx
  43. =<"🎜>"  dy="10"/>
  44.                                                                       <feGaussianBlur stdSisihan"=
  45. ><🎜   hasil="offset-blur"/>                                                           🎜>           <feComposite operator=<"🎜>"
  46.  
  47. dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>            <feFlood warna banjir=<🎜"><🎜 #FFF" 
  48. kelegapan banjir
  49. ="1" hasil ="warna"/>                       
  50.         <feComponentTransfer dalam="><">  hasil="bayangan">
  51.                                                                                                                                                                                                        < ;!-- Kelegapan Bayang -->                
  52. <feFuncA taip=<🎜">  cerun="0.5"/>           
  53. feComponentTransfer>           
  54. <feComposite operator="  dalam="bayangan" dalam2="SourceGraphic" hasil='final-shadow-1'/>                                 
  55.         
  56. <feOffset dx=<"🎜>"  dy="-12"/>                                                      
  57.         <feGaussianBlur stdSisihan"=><🎜   hasil="offset-blur"/>                                                           🎜>           
  58. <feComposite operator=<"🎜>"  dalam="bayang-akhir-1" dalam2="offset-blur" hasil="terbalik"/ >
  59.              <
  60. feFlood warna banjir=<🎜"><🎜 #69c39b" kelegapan banjir="1" hasil ="warna"/>                                <feComponentTransfer 
  61. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
  62. taip
  63. =<🎜">  cerun="0.5"/>           feComponentTransfer>  
  64.         <feComposite operator="  dalam="bayangan" dalam2="bayang-akhir-1" hasil='bayang-akhir-2'/>                       
  65.          
  66.     penapis>  
  67.        
  68.     <linearGradient id="LG"   
  69.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
  70.       
  71. <berhenti id="s0"  mengimbangi="0" warna henti ="#d6f8e9"/>
  72.          
  73. <berhenti id="s2"  mengimbangi="1" warna henti ="#9ee1c4"/>  
  74.     
  75. linearGradient>  
  76.        
  77.     
  78. <linearGradient id="LG2"   
  79.                     
  80. Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >                
  81. <
  82. berhenti id="s0"  mengimbangi="0.07" warna henti ="#fdfefe"/>  
  83.       <berhenti id="s1"  mengimbangi="0.5" warna henti ="#98e2c2"/>  
  84.       <berhenti id="s2"  mengimbangi="0.8" warna henti ="#79c9a7"/>  
  85.       <berhenti id="s3"  mengimbangi="1" warna henti ="#5fbc95"/>  
  86.     linearGradient>  
  87.        
  88.     <linearGradient id="anak panah1"   
  89.                     Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >         
  90.       
  91. <berhenti id="s0"  mengimbangi="0" warna henti ="#07594f"/>  
  92.       
  93. <berhenti id="s2"  mengimbangi="1" warna henti ="#01443c"/>  
  94.     
  95. linearGradient>  
  96.        
  97.     
  98. <linearGradient id=<🎜">"anak panah                        
  99. Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >         
  100.       <berhenti id="s0"  mengimbangi="0" warna henti ="#fd5959"/>  
  101.       <berhenti id="s2"  mengimbangi="1" warna henti ="#fe7c7c"/>  
  102.     linearGradient>  
  103.        
  104.     <linearGradient id="center- tombol luar"  
  105.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
  106.       <berhenti id="s0"  mengimbangi="0" warna henti ="#fffefe"/>  
  107.       <berhenti id="s2"  mengimbangi="1" warna henti ="#86ecdb"/>  
  108.     linearGradient>  
  109.        
  110.         <linearGradient id=" tombol-dalaman"  
  111.                     Ubah Kecerunan="putar(90 .5 .5)"🎜>>
  112.       
  113. <berhenti id="s0"  mengimbangi="0" warna henti ="#a0dcd2"/>
  114.   
  115.       <berhenti id="s2"  mengimbangi="1" warna henti ="#dff9ef"/>  
  116.     linearGradient>  
  117.        
  118.     <g transformasi="translate( 50, 20)">  
  119.          
  120.       <tepat x="0"  y="0"  
  121.           lebar="382" tinggitinggi<🎜 🎜>"382"    
  122.           isi="url(#LG)"  
  123.           penapis="url(#inset-shadow-big-bottom)"  
  124.            rx="75" ry<= 🎜>"105" />  
  125.        
  126.     <bulatan cx="191"  cy="191" r="155" isi="url(#LG2)"/>   
  127.     <bulatan cx="191"  cy="191" r="130" isi="#53d2c5"/>   
  128.     <bulatan cx="191"  cy="191" r="130" isi="#53d2c5"  penapis="url(#inset-shadow)" />  
  129.        
  130.       <g lebar="200"  tinggi="200"  
  131.        transformasi="terjemah(100, 100)">   >
  132.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"            
  133. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          <
  134. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur=
  135. "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />                        
  136. <betul
  137.  x="0"  y="0"                   lebar=
  138. "22" =tinggi 🎜>"70"                     isi
  139. =
  140. "url(#arrow1)"  
  141.                 kelegapan isian="0.5"  
  142.                 penapis="url(#blurred-source)"  
  143. <🎜
  144.                 rx="10" ryry>"10"  
  145.                 transformasi="terjemah(-11, -15)" ><&🎜 ;  
  146.     g>
  147.      
  148.          
  149.     <g lebar="200"  tinggi="200"  
  150.        transformasi="terjemah(100, 100)">   >
  151.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"            
  152. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          <
  153. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur=
  154. "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />                        
  155. <betul
  156.  x="0"  y="0"  
  157.                 lebar="20" =tinggi 🎜>"70"    
  158.                 isi="url(#arrow1)"  
  159.                 rx="10" ryry>"10"
  160.   
  161.                 transformasi="terjemah(-10, -10)" <&🎜 ;  
  162.     g>  
  163.        
  164.       <g lebar="200"  tinggi="200"  
  165.        transformasi="terjemah(100, 100)">   >
  166.        <animateTransform attributeName=<🎜"><🎜  taip="terjemah" dur="4s"    
  167.        
  168. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          
  169. <
  170. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur
  171. =
  172. "3600s" nilai<= 🎜>"90,0 0;450 0 0" bilangan berulang="tidak tentu" />                   
  173. <tepat
  174.  x="0"  y="0"  
  175.             Breite="18" Höhe="104"    
  176.             fill="url(#arrow1)"  
  177.             Füll-Deckkraft="0,8"  
  178.             filter="url(#blurred-source)"  
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn