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
- <div kelas="bekas" >
-
<svg lebar="6 tinggi="600" kelas='svg-element'>
-
-
<penapis id="f4" x="-50%" y ="-20%" lebar="200%" tinggi="140%">
-
<feOffset hasil="off dalam="SourceAlpha" dx="0" dy="25" / >
-
<feGaussianBlur hasil=<🎜">" dalam="offOut" stdSisihan="10" />
- <feBlend dalam="Source dalam2="blurOut" mod="biasa" />
- penapis>
-
- <tapis id="kabur- sumber" x="-50%" y="-20%" lebar="200%" tinggi="140%">
-
<feGaussianBlur dalam="warna" stdSisihan="5" hasil="blurOut"/>
-
penapis>
-
-
<penapis id="inset- bayang">
-
<feOffset dx=<"🎜>" dy="10"/>
- <feGaussianBlur stdSisihan="🎜"><🎜 hasil="offset-blur"/> 🎜>
<
- feComposite operator=<"🎜>" dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>
<
feFlood- warna banjir=<🎜"><🎜 hitam" kelegapan banjir="1" hasil 🎜>="warna"/>
- <feComponentTransfer dalam="><"> hasil="bayangan"> < ;!-- Kelegapan Bayang -->
- <feFuncA taip=<🎜"> cerun="1"/>
- feComponentTransfer>
- <feComposite operator=" dalam="bayangan" dalam2=< . 🎜>
penapis>
-
<penapis
id- =
"inset- bayang-bayang"- >
<feOffset dx=<"🎜>"
- dy="4"/>
-
<feGaussianBlur stdSisihan"=><🎜 hasil="offset-blur"/> 🎜>
- <feComposite operator=<"🎜>" dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>
<- feFlood warna banjir=<🎜"><🎜 putih" kelegapan banjir="1" hasil 🎜>="warna"/>
<feComponentTransfer
- dalam="><"> hasil="bayangan"> < ;!-- Kelegapan Bayang -->
<
taip- =<🎜"> cerun="0.5"/>
feComponentTransfer>
-
-
<feComposite operator=" dalam="bayangan" dalam2=< . 🎜>
penapis>
-
<penapis
- id
- ="inset- bayang-besar-bawah">
<feOffset dx
- =<"🎜>" dy="10"/>
<feGaussianBlurstdSisihan"=- ><🎜 hasil="offset-blur"/> 🎜>
<feComposite operator=<"🎜>"
- dalam="SourceGraphic" in2="offset-blur" hasil="terbalik"/>
<feFlood warna banjir
kelegapan banjir- ="1" hasil ="warna"/>
- <feComponentTransfer dalam="><"> hasil="bayangan">
< ;!-- Kelegapan Bayang -->
- <feFuncA taip=<🎜"> cerun="0.5"/>
- feComponentTransfer>
- <feComposite operator=" dalam="bayangan" dalam2="SourceGraphic" hasil='final-shadow-1'/>
-
- <feOffset dx=<"🎜>" dy="-12"/>
- <feComposite operator=<"🎜>" dalam="bayang-akhir-1" dalam2="offset-blur" hasil="terbalik"/ >
<- feFlood warna banjir=<🎜"><🎜 #69c39b" kelegapan banjir="1" hasil ="warna"/>
<feComponentTransfer
- dalam="><"> hasil="bayangan"> < ;!-- Kelegapan Bayang -->
<
taip- =<🎜"> cerun="0.5"/>
feComponentTransfer>
-
-
<feComposite operator=" dalam="bayangan" dalam2="bayang-akhir-1" hasil='bayang-akhir-2'/>
-
- penapis>
-
- <linearGradient id="LG"
- Ubah Kecerunan="putar(90 .5 .5)"🎜>>
- <berhenti id="s0" mengimbangi="0" warna henti ="#d6f8e9"/>
-
<berhenti id="s2" mengimbangi="1" warna henti ="#9ee1c4"/>
-
linearGradient>
-
-
<linearGradient id="LG2"
- Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >
<- berhenti id="s0" mengimbangi="0.07" warna henti ="#fdfefe"/>
-
<berhenti id="s1" mengimbangi="0.5" warna henti ="#98e2c2"/>
-
<berhenti id="s2" mengimbangi="0.8" warna henti ="#79c9a7"/>
-
<berhenti id="s3" mengimbangi="1" warna henti ="#5fbc95"/>
-
linearGradient>
-
-
<linearGradient id="anak panah1"
- Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >
- <berhenti id="s0" mengimbangi="0" warna henti ="#07594f"/>
-
<berhenti id="s2" mengimbangi="1" warna henti ="#01443c"/>
-
linearGradient>
-
-
<linearGradient id=<🎜">"anak panah
- Ubah Kecerunan="putar(-90 .5 .5)"<🎜;>&g >
- <berhenti id="s0" mengimbangi="0" warna henti ="#fd5959"/>
-
<berhenti id="s2" mengimbangi="1" warna henti ="#fe7c7c"/>
-
linearGradient>
-
-
<linearGradient id="center- tombol luar"
- Ubah Kecerunan="putar(90 .5 .5)"🎜>>
- <berhenti id="s0" mengimbangi="0" warna henti ="#fffefe"/>
- <berhenti id="s2" mengimbangi="1" warna henti ="#86ecdb"/>
- linearGradient>
-
- <linearGradient id=" tombol-dalaman"
- Ubah Kecerunan="putar(90 .5 .5)"🎜>>
- <berhenti id="s0" mengimbangi="0" warna henti ="#a0dcd2"/>
-
<berhenti id="s2" mengimbangi="1" warna henti ="#dff9ef"/>
-
linearGradient>
-
-
<g transformasi="translate( 50, 20)">
-
-
<tepat x="0" y="0"
- lebar="382" tinggitinggi<🎜 🎜>"382"
- isi="url(#LG)"
- penapis="url(#inset-shadow-big-bottom)"
- rx="75" ry<= 🎜>"105" />
-
- <bulatan cx="191" cy="191" r="155" isi="url(#LG2)"/>
- <bulatan cx="191" cy="191" r="130" isi="#53d2c5"/>
-
<bulatan cx="191" cy="191" r="130" isi="#53d2c5" penapis="url(#inset-shadow)" />
-
-
<g lebar="200" tinggi="200"
- transformasi="terjemah(100, 100)"> >
- <animateTransform attributeName=<🎜"><🎜 taip="terjemah" dur="4s"
- nilai="191,191;191,191" ulang Count ="tidak tentu"/>
<
- animateTransform attributeName=<🎜"><🎜 tambahan="jumlah" taip="putar"
dur=
- "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />
- <betul
- x="0" y="0"
lebar=
- "22" =tinggi 🎜>"70"
isi
=- "url(#arrow1)"
- kelegapan isian="0.5"
- penapis="url(#blurred-source)"
<🎜
- rx="10" ryry>"10"
-
transformasi="terjemah(-11, -15)" ><&🎜 ;
- g>
-
-
<g lebar="200" tinggi="200"
- transformasi="terjemah(100, 100)"> >
- <animateTransform attributeName=<🎜"><🎜 taip="terjemah" dur="4s"
- nilai="191,191;191,191" ulang Count ="tidak tentu"/>
<
- animateTransform attributeName=<🎜"><🎜 tambahan="jumlah" taip="putar"
dur=
- "86400s" nilai= 🎜>"200, 0 0;550 0 0" bilangan berulang="tidak tentu" />
- <betul
- x="0" y="0"
- lebar="20" =tinggi 🎜>"70"
-
isi="url(#arrow1)"
-
rx="10" ryry>"10"
-
transformasi="terjemah(-10, -10)" <&🎜 ;
-
g>
-
-
<g lebar="200" tinggi="200"
-
transformasi="terjemah(100, 100)"> >
-
<animateTransform attributeName=<🎜"><🎜 taip="terjemah" dur="4s"
- nilai="191,191;191,191" ulang Count ="tidak tentu"/>
<- animateTransform attributeName=<🎜"><🎜 tambahan="jumlah" taip="putar"
dur
=- "3600s" nilai<= 🎜>"90,0 0;450 0 0" bilangan berulang="tidak tentu" />
- <tepat
- x="0" y="0"
-
Breite="18" Höhe="104"
-
fill="url(#arrow1)"
-
Füll-Deckkraft="0,8"
-
filter="url(#blurred-source)"