今日は、純粋な HTML5 で実装された非常に美しい時計を共有したいと思います。インターフェイス全体は html5 で描画されます。レンダリングを見てみましょう:
XML/HTML コードコンテンツをクリップボードにコピー
- <div クラス="コンテナ" >
- <svg 幅="600" 身長="600" クラス= の svg 要素>
-
-
<フィルター id="f4" x="-50%" y ="-20%" 幅="200%" 身長="140%">
-
<feOffset 結果="offOut" in="SourceAlpha" dx="0" dy="25" / >
- <feGaussianBlur 結果="blurOut" in="offOut" stdDeviation="10" />
-
<feBlend in="ソースグラフィック" in2="blurOut" mode=「通常」 />
-
フィルター>
-
-
<フィルター id="ぼかし-ソース" x="-50%" y="-20%"幅="200%" 身長="140%">
-
<feGaussianBlur in="カラー" stdDeviation="5" 結果=「ぼかしアウト」/>
-
フィルタ>
-
-
<フィルター id="inset-シャドウ">
- <feOffset dx="0" dy="10"/>
-
<feGaussianBlur stdDeviation="15" 結果="オフセットブラー"/>
-
<feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
-
<feFlood フラッドカラー=" black" フラッド不透明度="1" 結果="色"/>
-
<feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
-
<feComponentTransfer in="シャドウ" 結果="シャドウ">
-
<feFuncA type="linear" 傾き="1"/>
-
feComponentTransfer>
-
<feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic"/>
-
フィルター>
-
-
<フィルター id="inset-シャドウビッグ">
- <feOffset dx="0" dy="4"/>
-
<feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
-
<feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
-
<feFlood フラッドカラー="白" フラッド不透明度="1" 結果="色"/>
-
<feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
-
<feComponentTransfer in="シャドウ" 結果="シャドウ">
-
<feFuncA type="linear" 傾き="0.5"/>
-
feComponentTransfer>
-
<feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic"/>
-
フィルター>
-
-
<フィルター id="inset-シャドウビッグボトム">
- <feOffset dx="0" dy="10"/>
-
<feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
-
<feComposite 演算子="out" in="ソースグラフィック" in2="オフセットブラー" 結果="反転"/>
-
<feFlood フラッドカラー=" #FFF" フラッド不透明度="1" 結果 ="色"/>
-
<feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
-
<feComponentTransfer in="シャドウ" 結果="シャドウ">
-
<feFuncA type="linear" 傾き="0.5"/>
-
feComponentTransfer>
-
<feComposite 演算子="over" in=「シャドウ」 in2="SourceGraphic" 結果='final-shadow-1'/>
-
-
<feOffset dx="0" dy="-12"/>
-
<feGaussianBlur stdDeviation="2" 結果="オフセットブラー"/>
-
<feComposite 演算子="out" in="final-shadow-1" in2=「オフセットブラー」結果=「反転」/ >
-
<feFlood フラッドカラー=" #69c39b" フラッド不透明度="1" 結果 ="色"/>
-
<feComposite 演算子="in" in="カラー" in2="反転" 結果="シャドウ"/>
-
<feComponentTransfer in="シャドウ" 結果="シャドウ">
-
<feFuncA type="linear" 傾き="0.5"/>
-
feComponentTransfer>
-
<feComposite 演算子="over" in=「シャドウ」 in2="final-shadow-1" 結果='final-shadow-2'/>
-
-
フィルター>
-
-
<linearGradient id="LG"
- gradientTransform="rotate(90 .5 .5)">
-
<停止 id="s0" オフセット="0" ストップカラー ="#d6f8e9"/>
- <停止 id="s2" オフセット="1" ストップカラー ="#9ee1c4"/>
- linearGradient>
-
-
<linearGradient id="LG2"
- gradientTransform="rotate(-90 .5 .5)">
-
<停止 id="s0" オフセット="0.07" ストップカラー ="#fdfefe"/>
- <停止 id="s1" オフセット="0.5" ストップカラー ="#98e2c2"/>
- <停止 id="s2" オフセット="0.8" ストップカラー ="#79c9a7"/>
- <停止 id="s3" オフセット="1" ストップカラー ="#5fbc95"/>
- linearGradient>
-
-
<linearGradient id="arrow1"
- gradientTransform="rotate(-90 .5 .5)">
-
<停止 id="s0" オフセット="0" ストップカラー ="#07594f"/>
- <停止 id="s2" オフセット="1" ストップカラー ="#01443c"/>
- linearGradient>
-
-
<linearGradient id="arrowRed"
- gradientTransform="rotate(-90 .5 .5)">
-
<停止 id="s0" オフセット="0" ストップカラー ="#fd5959"/>
- <停止 id="s2" オフセット="1" ストップカラー ="#fe7c7c"/>
- linearGradient>
-
-
<linearGradient id="center-ノブ-アウター"
- gradientTransform="rotate(90 .5 .5)">
-
<停止 id="s0" オフセット="0" ストップカラー ="#fffefe"/>
-
<停止 id="s2" オフセット="1" ストップカラー ="#86ecdb"/>
- linearGradient>
-
-
<linearGradient id="center-ノブインナー"
- gradientTransform="rotate(90 .5 .5)">
-
<停止 id="s0" オフセット="0" ストップカラー ="#a0dcd2"/>
-
<停止 id="s2" オフセット="1" ストップカラー ="#dff9ef"/>
- linearGradient>
-
-
<g transform="translate( 50, 20)「>
-
- <rect x="0" y="0"
- 幅="382" 高さ=「382」
- fill="url(#LG)"
- フィルター="url(#inset-shadow-big-bottom)"
- rx="75" ry="105" />
-
-
<circle cx="191" cy="191" r="155" fill="url(#LG2)"/>
- <circle cx="191" cy="191" r="130" fill="#53d2c5"/>
- <circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
-
-
<g 幅="200" 身長="200"
- transform="translate(100, 100)">
-
<animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
- 値="191,191;191,191" repeatCount ="無期限"/>
-
<animateTransform attributeName="transform" 加法="合計" 型=「回転」
- 期間="86400s" 値="200, 0 0;550 0 0" repeatCount="無期限" />
-
-
<rect x="0" y="0"
- 幅="22" 高さ=「70」
- fill="url(#arrow1)"
- 塗りつぶしの不透明度="0.5"
- フィルター="url(#blurred-source)"
- rx="10" ry=「10」
- transform="translate(-11, -15)" /> ;
- g>
-
-
<g 幅="200" 身長="200"
- transform="translate(100, 100)">
-
<animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
- 値="191,191;191,191" repeatCount ="無期限"/>
-
<animateTransform attributeName="transform" 加法="合計" 型=「回転」
- 期間="86400s" 値="200, 0 0;550 0 0" repeatCount="無期限" />
-
-
<rect x="0" y="0"
- 幅="20" 高さ=「70」
- fill="url(#arrow1)"
- rx="10" ry=「10」
- transform="translate(-10, -10)" /> ;
- g>
-
-
<g 幅="200" 身長="200"
- transform="translate(100, 100)">
-
<animateTransform attributeName="transform" type=「翻訳」 dur=「4s」
- 値="191,191;191,191" repeatCount ="無期限"/>
-
<animateTransform attributeName="transform" 加法="合計" 型=「回転」
- 期間="3600s" 値="90,0 0;450 0 0" repeatCount="無期限" />
-
-
<rect x="0" y="0"
-
幅="18" 高さ=「104」
-
fill="url(#arrow1)"
-
fill-opacity="0.8"
-
フィルター="url(#blurred-source)"