css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

前回の記事「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; */｝

ログイン後にコピー

7. ホバーマウスポインターのフローティングスタイルを使用する

}
.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 サイトの他の関連記事を参照してください。