ホームページ >ウェブフロントエンド >htmlチュートリアル >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