ホームページ > 記事 > ウェブフロントエンド > css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)
#クールなナビゲーション バー効果は次のとおりです。 クールなナビゲーション バー効果を作成する CSS3 メソッド1. 新しい HTML ファイルを作成します。まず前回の記事「css3を使ってフォントに立体感を与える方法を教えます(コード付き)」では、css3を使ってフォントに立体感を与える方法を紹介しました。 。次の記事では、CSS3 を使用してクールなナビゲーション バー効果を作成する方法を紹介しますので、一緒に見てみましょう。
div タグを記述し、
と入力して、このスタイル項目を呼び出します。これは、 Web サイトの CSS。内部のコンテンツを編集できます。
class はクラス セレクターであり、Web ページのフォントの色を純粋に静的に制御できます。
コード例<div> <ul> <li><a href="#">首页</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">地图</a></li> <li><a href="#">游戏</a></li> <li><a href="#">关于</a></li> </ul> </div>コードの効果 2. ナビゲーション バーの特殊効果 CSS グローバル設定を設定するには、head の間に追加します。
style css=”text/cssString コードを記述し、
style タグに外側マージン、内側マージン、段落設定フォントを記述し、
height を定義します。 height as
2000px.
body{ margin: 0px; padding: 0px; font-family: sans-serif; height: 2000px; }3. 次に、ナビゲーション バーに背景を追加し、背景色、高さ、幅の設定を
に入力します。 nav.
.nav{ width: 100%; height: 100px; background-color: red; }コードの効果 4. 次に、ナビゲーション バーを上部に固定します。 page.コード例
.item{ position: fixed; top:50px; right:100px; margin: 0; padding: 0; display: flex;コードの効果 5. 画像がリスト内のリスト項目マークとして設定されます。
##コード例
.item li{ list-style: none;}
6. 次に、相対位置、外側のマージン、内側のマージンを追加し、文字を大文字に変換し、色、太さ、
アンダーラインテキストの下に線を定義します。 コード例
.item li a{ position: relative; display: block; padding: 10px 20px; margin: 20px 0; text-decoration: none; text-transform: uppercase;/*将字符转为大写*/ color: #262626; font-weight: bold; /* transition: 0.5s; */}
} .item li a:hover{ color:#fff; }
コードの効果
8. ナビゲーション バーにエッジ設定を追加し、
transition 属性を使用してトランジション効果の時間を設定し、transgorm
を使用して境界線を 2 倍にし、# を使用します。 ##opacity余白は表示されません。
コード例
.item li a:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top:1px solid #000; border-bottom:1px solid #000; transform: scaleY(2);/*拉长边框两倍*/ opacity: 0;/*边距不显示*/ transition: 0.5s; z-index: -1; } .item li a:hover:before{ transform: scaleY(1);/*拉长边框两倍*/ opacity:1; } .item li a:after{ content:''; position: absolute; top: 1px; left: 0; width: 100%; height: 100%; background: #000; transform: scale(0); transition: 0.5s; z-index: -1;9. 最後の設定、
hover
マウスオーバーして色を黒に変更して追加します。回転とスケーリング。コード例
.item li a:hover:after{ transform: scale(1);}ok、HTML CSS編集コードが完成しました。 推奨学習:
CSS3ビデオチュートリアル
以上がcss3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。