9 つの絶妙でユニークな CSS3 メニューとボタン_html/css_WEB-ITnose

1. 小さなアイコンが付いた超立体的な CSS3 3D メニュー メニュー項目

CSS3 3D アニメーション メニュー、3D キューブ メニュー項目、HTML5/CSS3 カスタム ドロップダウンなど、以前に多くの CSS3 3D メニューを共有したことを覚えています。フレーム 3D カード折りたたみアニメーション、効果は非常に美しいです。今日は、もう 1 つのクールな CSS3 3D メニューを紹介します。このメニューはページ上で横向きに配置されており、各メニュー項目には素敵な小さなアイコンが付いています。

オンラインデモ

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

2. Pure CSS3 の 3 次元アニメーション メニュー メニュー項目を押すと内側に影が表示されます

今回は、純粋な CSS3 を使用して実装された 3 次元アニメーション メニューを共有します。メニューの実装は非常にシンプルで、特殊効果のレンダリングが多すぎませんが、特にグレーと黒の背景を使用すると、メニューが少し立体的に見えるため、非常にクリーンで美しく見えます。さらに、メニュー項目をクリックすると、メニュー項目に内側の影の視覚効果が表示されます。

オンラインデモ

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

3. HTML5/CSS3のクールな円形アニメーションメニュー

今日は、マウスをクリックするとメニューが円形になる、非常にクリエイティブなHTML5/CSS3アニメーションメニューを紹介します。 , 中央のボタンを押すと、クールなメニュー展開アニメーションとともにサブメニューが回り込んで展開します。

オンラインデモ

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

4. 定義可能なサイズと色を備えたクールなCSS3 3Dボタンのセット

今日は、このクールなCSS3 3Dボタンのデザインを共有します。非常にシンプルで、3 つの異なる色と 3 つの異なるサイズをサポートしています。

オンラインデモ

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

5. HTML5/CSS3アニメーションドロップダウンメニューのサブメニューはクールです

今日は、非常に効果的なCSS3ドロップダウンメニューとその他のCSS3ドロップダウンを共有します。メニュー機能 同様に、メイン メニュー上でマウスをスライドすると、サブメニューがプルダウンされて展開されます。このアニメーションは、長方形の展開アニメーションと呼ぶべきものです。

オンラインデモ

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

6. CSS3ブラックテーマメニューメニュー項目のフェードインおよびフェードアウトアニメーション

メニューはCSS3の機能を適用しているため、メニューの端にシャドウ効果が表示されます。メニューを表示し、3 次元の視覚効果を与えます。もう 1 つの特徴は、メニュー項目上でマウスをスライドさせると、フェードインおよびフェードアウトのアニメーション効果が表示されることです。これは非常に優れた CSS3 ブラック テーマ メニューです。

オンラインデモ

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

7. CSS3ボールフローティングボタン ボールの転がりはとてもリアルです

今日は非常にユニークなCSS3アニメーションボタンを共有したいと思います。通常のボタンとは異なり、このボタンは7つのドットで構成されており、小さなドットボタンの1つをクリックするたびに、ボールが対応する位置に転がり、その転がる効果も非常にリアルです。

オンラインデモ

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

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

今日はCSS3とSVGで実装されたテクスチャ背景の小さなアイコンを共有します。 icon 中空効果とテクスチャ背景のストロークがあり、非常に優れています。

オンラインデモ

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

9. CSS3 3D発光スイッチボタンのシミュレーション効果は非常にリアルです

少し3D効果があるはずのCSS3スイッチスライドボタンをリリースしました。とても普通です。ここでは、よりクールな CSS3 スイッチ ボタンを紹介します。これには 3D 効果があるだけでなく、スイッチがオンになると、その横にある小さなライトが点灯し、その光が投影されます。スイッチのエフェクトはかなりリアルです。

オンラインデモ

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

この記事への固定リンク: http://www.i7758.com/archives/1311.html