HTML5+CSS3_html/css_WEB-ITnose に基づく 10 個のクールなソース コード アニメーション

1. Bootstrap ベースの jQuery ログインフォーム

言うまでもなく、フォームの外観は Bootstrap スタイルに従っており、非常に美しいです。このログインフォームには、CSS3 で処理されたアバター画像と、HTML5 フォームフィールドの簡易検証が含まれており、CSS3 を使用することで、ログインフォーム全体の投影がより立体的に見えます。

オンラインデモ

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

2. クールなCSS3マルチウィンドウメールリーダー

これは、複数のメールリーダーを同時にクリックできるのが特徴です。別のページにジャンプすることなくメールを送信できます。読み終わったら、[閉じる] ボタンをクリックして、現在の電子メール ウィンドウを閉じることができます。この種の対話型ウィンドウについては、以前に CSS3 チャット ウィンドウも共有しました。これにも注目してください。

オンラインデモ

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

3.jQuery画像揺れプラグイン

これは、画像上でマウスをスライドさせると、画像が一連の揺れアニメーションを生成します。 。以前、より高度な画像揺れアニメーションを共有したことを今でも覚えています。Web ページ要素の揺れ効果を実装するには、jQuery/CSS3 の記事を参照してください。

オンラインデモ

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

4. HTML5のスマイリーフェイススタイルの音楽プレーヤーはとてもかわいいです

今日はとてもかわいいHTML5の音楽プレーヤーを紹介します。スマイリーフェイスのスタイルも、プレーヤーのボタンの配置によって生成されます。同時に、このプレーヤーの機能は、再生、一時停止、音量調整、再生の進行状況など、比較的充実しています。

オンラインデモ

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

5.CSS3のクールなポップアップダイアログボックスはモバイル端末にも対応しています

これはHTML5とCSS3をベースにしたポップアップダイアログボックスで、全部で4種類あります。各ダイアログ ボックスには、成功時のアニメーションや読み込み時のアニメーションなどの特定のアニメーション効果があり、以前に共有されたエレガントな外観とマスクを備えた jQuery ポップアップ レイヤー ダイアログ ボックスと比較すると、非常に優れています。強力なコールバック関数はありませんが、非常にシンプルでモバイルでの使用に適しています。

オンラインデモ

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

6.jQuery虫眼鏡製品画像プレビュープラグインは、アルバムの閲覧をサポートします

以前紹介した、小さく拡大できるjQuery球形虫眼鏡特殊効果プラグインをまだ覚えていますか閲覧用のテキスト。今日共有したいのは、商品画像の閲覧に適用できる jQuery 虫眼鏡プラグインです。サムネイルの上にマウスを置くと、大きな画像の特定の部分を参照できます。このプラグインの最大の特徴は、画像アルバムの閲覧に対応していることであり、優れた商品画像閲覧プラグインです。

オンラインデモ

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

7.14 CSS3画像カスケード切り替えアニメーション

以前、jQueryカスケードページ回転フォーカス画像プラグインを共有しましたが、これは非常に優れています。現在の CSS3 画像カスケード切り替えアニメーションは、14 種類の異なる画像切り替えアニメーションを備え、さらに強力になり、アニメーション効果がさらにクールになっています。これら 14 個のアニメーションにはそれぞれ少しずつ違いがあり、ニーズに応じて選択できます。

オンラインデモ

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

8.jQueryの非常にパーソナライズされた単一行ボックスとチェックボックス

この純粋なCSS3など、ラジオボックスとチェックボックスのいくつかの美化バージョンを以前に共有したことを覚えていますチェックボックスとラジオボックスのボタンを美しくし、光るラジオボックスをCSS3でカスタマイズします。今日共有したいのは、非常にパーソナライズされたラジオ ボタンとチェックボックスのプラグインで、色を自分で定義できます。

オンラインデモ

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

9. 星が落ちるアニメーションを追いかけるJavaScriptマウス

今日は、この種のマウスを追いかける興味深いアニメーションを共有します。特に一部のパーソナライズされた個人ブログで使用されます。この JavaScript マウスのアニメーションは流れ星を模したもので、星の形や色もランダムに変化します。 ...エフェクトにはさまざまな視覚効果があります。さらに、特にフォト アルバム アプリケーションで使用する場合は、別の写真を閲覧できるだけでなく、同じ写真に複数の特殊効果を適用することもできます。

オンラインデモ

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

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