7 つのトップ CSS3 アニメーション効果を共有する_html/css_WEB-ITnose

1. CSS3 SVG テキスト背景アニメーション、クールなテキスト効果

今日は、CSS3 と SVG に基づいたテキスト効果を共有します。背景アニメーションの再生中に、テキストの背景でいくつかのアニメーション効果を定義できます。テキストも選択可能です。この例では、テキストの背景に水の波や炎のアニメーション特殊効果を表示できます。もちろん、SVG の特性を使用して他のクールな背景アニメーションを作成することもできます。

オンラインデモ

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

2. CSS3の下線はアニメーションメニューの背景色のグラデーションに従います

今日は、このメニューの特徴は、CSS3メニューがあることです。マウスの動きに追従する下線。マウスをメニュー項目上でスライドさせると、アニメーションに続いて下線が表示され、現在アクティブなメニュー項目には下線が付き、太字になります。また、メニュー項目の背景色にもグラデーションアニメーション効果があり、メニュー全体がとてもクールに見えます。

オンラインデモ

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

3. CSS3 ジェスチャ変換アニメーションの特殊効果

この CSS3 アニメーションは非常に特別で、手のひらの下にスライドボタンがあります。ボタンをクリックします。 ジェスチャを切り替えることができます。 現在、2 つの異なるジェスチャを切り替えることができます。この CSS3 ジェスチャー変換アニメーションは非常にクールです。

オンラインデモ

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

4. Bootstrap に基づいた CSS3 ブレッドクラムメニュー

今日は、Bootstrap に基づいた CSS3 ブレッドクラムメニューを共有します。 Web サイトに埋め込むと、ユーザーが Web サイトのあらゆるレベルのディレクトリ間を移動できるようになります。このブレッドクラム メニューの色はブートストラップ スタイルに従っており、非常に新鮮で自然です。また、CSS3 機能を使用してメニュー項目を丸くするため、メニュー全体が非常に丸くなります。

オンラインデモ

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

5. Pure CSS3 はディスククロックアニメーションを実現します

今日は引き続き、純粋な CSS3 によって実現されるクールなディスククロックアニメーションを共有します。ディスクの形成や時計の針の形成など、初期化中の特殊効果により、非常にクールなアニメーションの色が得られます。

オンラインデモ

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

6. HTML5/CSS3 3Dドロップダウン折りたたみメニュー3Dサブメニュー

今回共有したいのは、特徴があるだけでなく、非常にユニークなCSS3メニューです。ドロップダウン メニューの 、ドロップダウン サブメニューには 3D 折り紙効果があり、非常にクールでシンプルな HTML5/CSS3 ドロップダウン メニューのように見えます。

オンラインデモ

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

7. ダイナミックCSS3の読み込みテキストエフェクト

これは非常に見栄えの良いCSS3の読み込み読み込みアニメーションです。 読み込み中という文字にしか見えませんが、CSS3の機能を使用しています。これらの文字を非常にダイナミックに表現します。

オンラインデモ

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

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