Eine sehr schöne Uhr, die mit reinen HTML5_html5-Tutorial-Fähigkeiten gezeichnet wurde-H5-Tutorial-php.cn

Eine sehr schöne Uhr, die mit reinen HTML5_html5-Tutorial-Fähigkeiten gezeichnet wurde

WBOY

Freigeben： 2016-05-16 15:46:58

Original

1753 Leute haben es durchsucht

Heute möchte ich mit Ihnen eine sehr schöne Uhr teilen, die in reinem HTML5 implementiert ist. Die gesamte Oberfläche ist mit HTML5 gezeichnet. Werfen wir einen Blick auf die Renderings:

Implementierungscode.

　HTM-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<div class="container" >
<svg width="600" Höhe="600" Klasse='svg-element'>
<filter id="f4" x="-50%" y ="-20%" Breite="200%" Höhe="140%">
<feOffset Ergebnis="offOut" in="SourceAlpha" dx="0" dy="25" / >
<feGaussianBlur Ergebnis="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" Modus="normal" />
Filter>
<filter id="unscharf- Quelle" x="-50%" y="-20%" Breite="200%" Höhe="140%">
<feGaussianBlur in="color" stdDeviation="5" Ergebnis="blurOut"/>
Filter>
<filter id="inset- Schatten">
<feOffset dx="0" dy="10"/>
<feGaussianBlur stdDeviation="15" Ergebnis="offset-blur"/>
<feComposite Operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<feFlood flood-color=" schwarz" Flood-Opacity="1" Ergebnis="color"/> >
<feComposite Operator="in" in="Farbe" in2="invers" Ergebnis="Schatten"/>
<feComponentTransfer in="shadow" Ergebnis="Schatten"> & lt ;!-- Schattendeckkraft -->
<feFuncA Typ="linear" Steigung="1"/>
feComponentTransfer>
<feComposite Operator="over" in="Schatten" in2="SourceGraphic"/> 🎜>
Filter>
<
filter id="inset- schattengroß“> <
feOffset dx="0" dy="4"/>
<feGaussianBlur stdDeviation="2" Ergebnis="offset-blur"/>
<feComposite Operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<feFlood flood-color=" weiß" Flood-Opacity="1" Ergebnis="color"/> >
feComposite Operator="in" in="Farbe" in2="invers" Ergebnis="Schatten"/>
feComponentTransfer in="shadow" Ergebnis="Schatten"> & lt ;!-- Schattendeckkraft --> <
feFuncA Typ="linear" Steigung="0,5"/> feComponentTransfer>
<feComposite Operator="over" in="Schatten" in2="SourceGraphic"/> 🎜>
Filter>
<
filter id="inset- schatten-big-bottom"> <
feOffset dx="0" dy="10"/> <
feGaussianBlur stdDeviation="2" Ergebnis="offset-blur"/> <
feComposite Operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <
feFlood flood-color=" #FFF" Flood-Opacity="1" Ergebnis ="color"/> 🎜>
<feComposite Operator="in" in="Farbe" in2="invers" Ergebnis="Schatten"/>
<feComponentTransfer in="shadow" Ergebnis="Schatten"> & lt ;!-- Schattendeckkraft -->
<feFuncA Typ="linear" Steigung="0,5"/>
feComponentTransfer>
<feComposite Operator="over" in="Schatten" in2="SourceGraphic" result='final-shadow-1'/>
<
dx="0" dy="-12"/>
<feGaussianBlur stdDeviation="2" Ergebnis="offset-blur"/>
<feComposite Operator="out" in="final-shadow-1" in2="offset-blur" Ergebnis="invers"/ >
<feFlood flood-color=" #69c39b" Flood-Opacity="1" Ergebnis ="color"/> 🎜>
feComposite Operator="in" in="Farbe" in2="invers" Ergebnis="Schatten"/>
feComponentTransfer in="shadow" Ergebnis="Schatten"> & lt ;!-- Schattendeckkraft --> <
feFuncA Typ="linear" Steigung="0,5"/> feComponentTransfer>
<feComposite Operator="over" in="Schatten" in2="final-shadow-1" Ergebnis='final-shadow-2'/>
>
<
id="LG"
<stop id="s0"
Offset="0" Stoppfarbe ="#d6f8e9"/> <stop id="s2"
Offset="1" Stoppfarbe ="#9ee1c4"/> linearGradient>
<linearGradient id
"LG2"
> <stop id
"s0" Offset="0,07"
="#fdfefe"/>
<stop id="s1" Offset="0,5" Stoppfarbe ="#98e2c2"/>
<stop id="s2" Offset="0,8" Stoppfarbe ="#79c9a7"/>
<stop id="s3" Offset="1" Stoppfarbe ="#5fbc95"/>
linearGradient>
<linearGradient id="arrow1"
> <stop
="s0" Offset="0" Stoppfarbe ="#07594f"/> <stop
="s2" Offset="1" Stoppfarbe ="#01443c"/> linearGradient>
<
="arrowRed" >
<stop id="s0" Offset="0" Stoppfarbe ="#fd5959"/>
<stop id="s2" Offset="1" Stoppfarbe ="#fe7c7c"/>
linearGradient>
<linearGradient id="center- knauf-außen"
<stop
="s0" Offset="0" Stoppfarbe ="#ffffefe"/> <stop
="s2" Offset="1" Stoppfarbe ="#86ecdb"/> linearGradient>
<
="center- knauf-innen" <
id="s0" Offset
"0" Stoppfarbe ="#a0dcd2"/>
<stop id="s2" Offset="1" Stoppfarbe ="#dff9ef"/>
linearGradient>
<g transformieren="translate( 50, 20)">
<rect x="0" y="0"
Breite="382" Höhe="382"
fill="url(#LG)"
filter="url(#inset-shadow-big-bottom)"
rx="75" ry="105" />
<Kreis cx="191" cy="191" r="155" fill="url(#LG2)"/>
<Kreis cx="191" cy="191" r="130" fill="#53d2c5"/>
<Kreis cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
<g width="200" Höhe="200"
transform="translate(100, 100)">
<animateTransform attributeName="transform" type="translate" dur="4s"
values="191,191;191,191" repeatCount ="unbestimmt"/>
<animateTransform attributeName="transform" Additiv="Summe" Typ="drehen"
Dur="86400s" Werte="200, 0 0;550 0 0" repeatCount="unbestimmt" />
<rect x="0" y="0"
🎜>"70"
🎜>"10"
; g
> <g width
="200" Höhe="200"
transform="translate(100, 100)">
<animateTransform attributeName="transform" type="translate" dur=
"4s" values="191,191;191,191"
repeatCount ="unbestimmt"/> <animateTransform attributeName="transform" Additiv=
"Summe" Typ="drehen" Dur="86400s"
Werte="200, 0 0;550 0 0" repeatCount="unbestimmt" /> <rect
x="0" y="0"
🎜>"70" 🎜>"10" ;
g>
<g width=
Höhe="200"
="translate(100, 100)">
<
attributeName="transform" type="translate" dur="4s"
values="191,191;191,191"
="unbestimmt"/> <animateTransform attributeName="transform" Additiv="Summe"
Typ="drehen" Dur="3600s"
="90,0 0;450 0 0" repeatCount="unbestimmt" /> <rect x
"0" y="0"
largeur="18" hauteur="104"
fill="url(#arrow1)"
fill-opacity="0.8"
filtre="url(#blurred-source)"