masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
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
Lepaskan： 2016-05-16 15:46:58
asal
1753 orang telah melayarinya

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
  18.  warna banjir=<🎜"><🎜 hitam" kelegapan banjir="1" hasil 🎜>="warna"/>                       
  19.         <feComponentTransfer dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->  
    20.              
  20. <feFuncA taip=<🎜">  cerun="1"/>           
  21. feComponentTransfer>           
  22. <feComposite operator="  dalam="bayangan" dalam2=< . 🎜>     penapis>  
    23.        
  23.     <penapis 
    24. id
  24. =
    25. "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.              <
  29. feFlood warna banjir=<🎜"><🎜 putih" kelegapan banjir="1" hasil 🎜>="warna"/>                                <feComponentTransfer 
  30. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
    31. 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"/>
    38.                                                                       <feGaussianBlur stdSisihan"=
  38. ><🎜   hasil="offset-blur"/>                                                           🎜>           <feComposite operator=<"🎜>"
    39.  
  39. dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>            <feFlood warna banjir=<🎜"><🎜 #FFF" 
    40. kelegapan banjir
  40. ="1" hasil ="warna"/>                       
  41.         <feComponentTransfer dalam="><">  hasil="bayangan">
    42.                                                                                                                                                                                                        < ;!-- 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.              <
  49. feFlood warna banjir=<🎜"><🎜 #69c39b" kelegapan banjir="1" hasil ="warna"/>                                <feComponentTransfer 
  50. dalam="><">  hasil="bayangan">                                                                                                                                                                                                       < ;!-- Kelegapan Bayang -->                <feFuncA 
    51. 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.       
  59. <berhenti id="s0"  mengimbangi="0" warna henti ="#d6f8e9"/>
    60.          
  60. <berhenti id="s2"  mengimbangi="1" warna henti ="#9ee1c4"/>  
    61.     
  61. linearGradient>  
    62.        
    63.     
  63. <linearGradient id="LG2"   
    64.                     
  64. Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >                
    65. <
  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.       
  73. <berhenti id="s0"  mengimbangi="0" warna henti ="#07594f"/>  
    74.       
  74. <berhenti id="s2"  mengimbangi="1" warna henti ="#01443c"/>  
    75.     
  75. linearGradient>  
    76.        
    77.     
  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.       
  91. <berhenti id="s0"  mengimbangi="0" warna henti ="#a0dcd2"/>
    92.   
  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. =
  116. "url(#arrow1)"  
  117.                 kelegapan isian="0.5"  
  118.                 penapis="url(#blurred-source)"  
    119. <🎜
  119.                 rx="10" ryry>"10"  
  120.                 transformasi="terjemah(-11, -15)" ><&🎜 ;  
  121.     g>
    122.      
  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.   
  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.        
  140. nilai="191,191;191,191" ulang Count ="tidak tentu"/>          
    141. <
  141. animateTransform attributeName=<🎜"><🎜  tambahan="jumlah" taip="putar"            dur
    142. =
  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)"  
Label berkaitan：
html5时钟
sumber：php.cn
Artikel sebelumnya：HTML5 pemain video skrin penuh (Skrin penuh) kaedah contoh_html5 kemahiran tutorial Artikel seterusnya：Perbincangan ringkas tentang kemahiran tutorial html5 layout_html5 responsif
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk membuat tengah malam berfungsi dalam PHP untuk memotong masa? Ini tidak menetapkan masa kepada tengah malam: newDateTime('firstdayof-1monthmidnight') be...
daripada 2024-04-03 13:48:12
0
1
332
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Hadkan ketinggian segmen akordion yang runtuh Bootstrap 5 Vue3 Saya sedang membina aplikasi web menggunakan Vue3 dan bootstrap5. Tetapi saya fikir soalan...
daripada 2024-03-31 21:56:54
0
1
332
Maklumkan API setiap minit tanpa bergantung pada muat semula pengguna Inilah yang saya ada sekarang. Di Mount () saya, saya mempunyai fetchCoins() tetapi ini me...
daripada 2024-03-31 14:34:11
0
1
336
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan