超豪華なHTML5/CSS3アプリケーションプラグイン20個を詳しく紹介（写真）

HTML5 ベースのアプリケーションは現在非常に普及しています。今日は 20 個の非常に素晴らしい HTML5/CSS3 アプリケーション プラグインを紹介します。皆さんも気に入って、お友達と共有していただければ幸いです。

1. HTML5 ビデオの断片化と再編成の特殊効果、強力な視覚的インパクト

HTML5 のビデオ プレーヤーはたくさんありますが、この HTML5 ビデオの断片化と再編成の特殊効果は非常に刺激的で、強力な視覚効果をもたらします。インパクト。ビデオ内の任意の場所をクリックすると、HTML5 によってこれらの領域が断片に分割され、しばらくすると、これらの壊れたビデオの断片が自動的に再構築されます。非常に優れた HTML5 ビデオ効果です。

オンラインデモ / / ソースコードのダウンロード

2. HTML5 3D Google 検索の小さな箱の大きな世界

HTML5 は本当に何千もの想像を可能にし、実際に Google 検索のアイデアを思いつきました. HTML5 テクノロジーを使用して、Google 検索を組み込みます。 小さな箱が到着し、3D 検索を開始しました。マウスが動くと、HTML5 3D 検索ボックスが回転し、非常に立体的になります。検索ボタンをクリックしてボックスを開き、Google 検索を実行します。

オンラインデモ / / ソースコードのダウンロード

3、CSS3/jQueryクリエイティブボックスアニメーションメニュー

フロントエンド開発者として、私はさまざまなjQueryメニューを見てきましたが、このjQuery/CSS3メニューはユニークですメニュー項目は小さな箱のような9マスの中に埋め込まれており、温かみのある背景でメニュー全体の外観がとてもかわいらしいです。メニュー項目をクリックするとボックスが展開され、メニュー項目の特定の内容が表示されます。この CSS3 メニューには、展開時に素晴らしいアニメーションが表示されます。

オンラインデモ/ソースコードダウンロード

4. リアルタイムデータを表示できる豪華な HTML5 チャート

HTML5 は、以前の Web チャートと比較して、作成しやすく、より便利です。より強力な。この HTML5 グラフ プラグインは、非常に豪華でプロフェッショナルな外観を持ち、データ表示においても非常に有利です。この HTML5 グラフは、多次元データ表示をサポートするだけでなく、エリア選択データ機能もサポートしています。データをより便利に管理します。

オンラインデモ / / ソースコードのダウンロード

5. HTML5 重力感知ゲーム リーダーのアバターを振ってください

もうすぐ旧正月ですが、給料はあまり増えず、年末ボーナスもありませんお金をもらっているし、リーダーが大嫌いだ。この HTML5 重力感知ゲームを使用して、リーダーのアバターを楽しんでください。あなたが嫌い​​なリーダーのアバター写真をいくつか作成し、この HTML5 重力感知ゲーム プラグインを使用してマウスをドラッグしてこれらのアバターを振り、給料を上げるなと言います...給料を上げるなと言います...

オンラインデモ / ソースコードのダウンロード

6. HTML5 3D 3D 画像回転再生表示

HTML5 テクノロジーの出現以来、ブラウザ上で 3D 特殊効果がますます見られるようになりました。 HTML5 3D の強力な機能を反映した HTML5 3D 立体画像回転再生・表示ツールです。もちろん、この 3D 画像デモを表示するには、HTML5 3D 機能をサポートするブラウザが必要です。

オンラインデモ / / ソースコードのダウンロード

7. HTML5 中国チェスゲーム カスタムチェスの難易度

チェスゲームは卓上ゲームにおいて非常に成熟しており、中国チェスには多くのバージョンがあります。 HTML5 テクノロジーに基づいた今日の中国チェス ゲームは非常にユニークで、中国チェス ゲームの難易度を選択できるだけでなく、チェス盤のスタイルを切り替えることもできます。プログラムを書くのに疲れたら、コーヒーを飲みながら、この HTML5 中国チェス ゲームの実装アルゴリズムを理解していると思います。この HTML5 中国チェス ゲームを学ぶためにソース コードを開くことができます。

オンラインデモ / / ソースコードのダウンロード

8. HTML5 プレーヤー Myth カセット クラシック プレーヤー

これは非常に古典的ですが、非常にファッショナブルな HTML5 プレーヤーであるため、このカセットはクラシック プレーヤーと言われています。スタイル HTML5 プレーヤーは比較的古いものですが、最近ではこのスタイルを備えている HTML5 プレーヤーがほとんどないため、非常にクリエイティブであり、ファッショナブルになっています。個人の家にパーソナライズされたプレーヤーを追加したい場合は、この HTML5 カセット クラシック プレーヤーを選択できます。これは HTML5 プレーヤーの神話であり、非常に古典的だと個人的に思います。

オンライン デモ / ソース コードのダウンロード

9. HTML5 スーパー マリオ ゲームの再体験 HTML5 ゲーム クラシック

子供の頃に一緒に遊んだスーパー マリオ アドベンチャー ゲームをまだ覚えていますか?はい、これは私たちが子供の頃に非常に人気のあるゲームでした。現在、外国人は HTML5 テクノロジーを使用してスーパー マリオを Web 上で実行できます。ただし、HTML5 バージョンのスーパー マリオはオリジナルのバージョンほど強力ではありません。完璧に書かれています。 HTML5 は非常に強力で、HTML5 ゲームはさらに鮮明です。

オンラインデモ / ソースコードのダウンロード

10. ロマンチックなプログラマー HTML5 愛の告白アニメーション

私たち プログラマー も愛を追求するために非常にロマンチックです。 以下は、HTML5 を使用してクラスメートによって作成された自作バージョンです。彼が学んだ知識 HTML5 の愛の告白アニメーションはとても温かく、魅力的です。あなたが独身のプログラマーなら、急いで自分の愛の告白アニメーションを作ってください。

オンラインデモ / ソースコードダウンロード

11. CSS3 パスワード強度検証フォーム スピードメータースタイル

ウェブサイトでメンバーとして登録する際に、強力で大きなパスワードを入力すると、アカウントのセキュリティが大幅に向上します。どちらのパスワードがより安全ですか?この CSS3 パスワード強度検証フォーム プラグインでは、現在入力されているパスワードのセキュリティ レベルを尋ねることができます。興味深いのは、パスワード強度が増加するにつれて、パスワード強度検証プラグインのスタイルがコード スピード メーターに似ていることです。 、コード スピード メーター ポインタは時計回りに回転します。もちろん、回転の特殊効果は CSS3 と jQuery を組み合わせて実現されます。

オンラインデモ / ソースコードのダウンロード

12. 小さな手が動く純粋な CSS3 の Android ロゴ アニメーション描画

今日は、純粋な CSS3 を使用して Android ロゴを実現します。 CSS3 Android ロゴ 主に CSS3 の角丸などの属性を使用して描かれたロゴは、Android 悪役の頭や手の上をマウスで滑らせるとアニメーション効果も得られます。小さな手はまだ振ることができます。

オンラインデモ / / ソースコードのダウンロード

13. 純粋な CSS3 発光ログインフォーム

今日紹介した CSS3 フォームは、見た目が美しいだけでなく、非常に美しく作られています。カラー発光アニメーションも付いています。マウスでフォームをアクティブにすると、色のグラデーションを伴う輝くアニメーションがフォームの周囲に表示され、CSS3 フォーム全体が特に明るく見えます。さらに重要なことは、この CSS3 発光フォームは基本的に CSS3 で実装されており、JS コードはほとんどなく、CSS3 エンジンでの最適化が非常に明白であることです。

オンラインデモ / / ソースコードのダウンロード

14、CSS3 3D プログレスバーボタン 18 の絶妙なスタイル

Web ページでデータを送信するときにプログレスバーがよく見られますが、ほとんどのプログレスバーはページの他の領域にあります。 Web ページ ポップアップ ウィンドウなどのローカル表示。この CSS3 によって実装されたプログレスバーはボタン上に表示され、ユーザーの送信の進行状況をより直感的に反映できます。CSS3 プログレスバーボタンのスタイルは非常に美しく、ブラウザー上で 3D の立体感を与えることもできます。さらに、プログレスバーは合計 18 種類のさまざまな形式で表示できます。

15. HTML5の水の波紋アニメーションの特殊効果は非常にリアルです

現実の生活では、雨滴が小さな川に落ちると、川に水の波紋が現れることがよくあります。 。今日は HTML5 を使用して水の波紋の効果をシミュレートしました。川の写真をクリックすると、クリックした場所から水の波が始まり、遠くまで広がります。 HTML5 を使用してシミュレートされたこの水の波の効果は非常に現実的ですが、CPU に少し負荷がかかります。

オンラインデモ / / ソースコードのダウンロード

16. HTML5の雨粒落下アニメーションで雨粒が飛んでいきます

HTML5を使用して雨粒の落下を実現するには、次の点に注意する必要があります: 1. 雨粒のサイズと形状; 2. 雨滴の落下速度制御、加速された落下に注意してください。このデモアニメーションは、雨粒が落ちるアニメーションを鮮やかにシミュレートしています。マウスを上に動かすと、3 つの雨粒が形成され、下に落ちます。 HTML5技術は本当に便利です。

オンラインデモ / / ソースコードのダウンロード

17. HTML5 パックマン ゲーム PCMAN

今日は、優れた HTML5 ゲーム、HTML5 パックマン ゲームを紹介します。パックマンとモンスターのグループがあります。パックマンを操作して道にある小さな豆を食べる必要があります。パックマンがモンスターに遭遇して食べられると、ゲームオーバーになります。この HTML5 ゲームには完璧ではない点が 1 つあります。それは、パックマンがモンスターに遭遇しても食べられないということです。興味のある学生は、このゲームを改良し続けることができます。 HTML5 ゲーム開発にはテクノロジーだけでなく創造性も必要です。

オンラインデモ / / ソースコードのダウンロード

18. HTML5 ピクセル破壊画像アニメーション画像が床中に散らばっています

この HTML5 画像アニメーション特殊効果は、画像を多数のピクセル粒子に破壊します。画像をクリックした後、これらのピクセル粒子が地面に落ち、粉砕されたピクセル画像粒子が再び組み立てられて完全な画像になります。 HTML5 テクノロジーを使用してこの画像破壊効果を実現するのは非常に簡単です。興味のある学生は、ソース コードをダウンロードして学習できます。

オンラインデモ / ソースコードのダウンロード

19. HTML5 の宇宙戦闘機ゲームはエキサイティングでエキサイティングです

この HTML5 ゲームの主人公は、英雄的で強力な宇宙戦闘機です。ゲームに入ったら、「Z」キーを押して弾を発射し、敵の航空機を破壊します。この HTML5 戦闘機ゲームの特徴は、 1. ゲームのグラフィックが非常に美しくリアルで、サウンド要素がゲームをより魅力的にするために追加されています。 2. 敵機の種類や弾の種類が多く、ゲーム要素が豊富です。プレイヤーを飽きさせないように。

オンラインデモ / / ソースコードのダウンロード

20、HTML5アニメーション画像プレーヤー、ハイエンドの雰囲気

私たちは多くの画像再生プラグイン（フォーカス画像）を見てきましたが、その多くはjQueryに基づいています。今回紹介する HTML5 画像プレーヤーは非常に特殊で、画像を切り替える際のトランジション アニメーション効果だけでなく、画像内のテキストが移動したり、分割されたり、再グループ化されたりするなど、画像内の要素にもアニメーション効果が適用されます。 。この HTML5 アニメーション画像プレーヤーは、ハイエンドで高級なものと言えます。

オンラインデモ/ソースコードのダウンロード

以上が超豪華なHTML5/CSS3アプリケーションプラグイン20個を詳しく紹介（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。