SVG_html/css_WEB-ITnose に基づく 6 つの HTML5CSS3 アプリケーションとアニメーション

1. CSS3/SVG テクスチャ背景の小さなアイコン中空効果アイコン ボタン

今日は、CSS3 と SVG で実装されたテクスチャ背景の小さなアイコンを共有します。アイコン上でマウスをスライドすると、中空効果が表示されます。テクスチャ背景、効果は非常に良いです。

オンラインデモ

ソースコードのダウンロード

2. HTML5 SVG タブ スライダー メニュー 非常にクールなタブ メニュー

これまでに多くの HTML5/CSS3 メニューを共有してきましたが、そのほとんどは比較的実用的であると言えるでしょう。今日は、HTML5 タブ メニューの別の形式を共有しましょう。このタブメニューは HTML5 と SVG を使用して実装されており、見た目も美しく、タブの切り替えも非常に便利です。

オンラインデモ

ソースコードダウンロード

3. HTML5/SVGは風に揺れる木のアニメーションを実現します

今日のHTML5アニメーションはとてもユニークです。風に揺れる木ですが、この木はシミュレートされています。見た目はそれほど現実的ではありません。それは木の骨組みだけです。ツリーの構造は SVG で記述されます。HTML5 の SVG 複数折れ線グラフなど、SVG に関する多くのアニメーション効果も以前に紹介しました。

オンラインデモ

ソースコードのダウンロード

4. HTML5/SVG線形グラフ描画可能なグラフ領域の色

今日共有したいHTML5グラフアプリケーションは、主にSVGで構築された線形グラフです。チャートは、チャートのデータ領域をさまざまな色で描画できます。さらに、このグラフは以前に共有された HTML5 線形グラフ iGrapher に似ていますが、それほど強力ではありません。

オンラインデモ

ソースコードのダウンロード

5. ジェットコースターアニメーションを実現するHTML5/SVG

今日は、主にSVGを使用したクールなHTML5/SVGアニメーションを共有します。パスアニメーションで実装されており、エフェクトがとてもクールです。さらに、その他の SVG アニメーションについては、この HTML5 SVG キツネの走るアニメーションや、風に揺れる HTML5/SVG アニメーションの木も非常に優れています。

オンラインデモ

ソースコードのダウンロード

6. HTML5 SVGはiPhoneのカメラシャッターエフェクトを模倣します

これは、HTML5とSVGの特性を利用してiPhoneカメラアプリケーションエフェクトのシャッターを模倣するクールなカメラシャッターエフェクトです。 HTML5 シャッターは、エッジに 6 つの異なる色が表示され、非常に美しい外観を持っています。シャッターを押すと、iPhone のカメラ アプリケーションと同様の効果が表示されます。

オンラインデモ

ソースコードのダウンロード

この記事へのパーマリンク: http://www.i7758.com/archives/1627.html