炫酷的導(dǎo)航欄效果圖如下

CSS3制作炫酷的導(dǎo)航欄效果的方法

1、新建一個(gè)html文件，首先寫div標(biāo)簽輸入寫

調(diào)用這個(gè)樣式item，就是你網(wǎng)站CSS里定義的樣式，可以編輯里面的內(nèi)容，class是類選擇器，可以純靜態(tài)在網(wǎng)頁中控制字體顏色。

代碼示例

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<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="#">關(guān)于</a></li>
</ul>
</div>

代碼效果

body{ margin: 0px; padding: 0px; font-family: sans-serif; height: 2000px; }

3、接下來，給導(dǎo)航欄添加背景在nav輸入背景顏色、高度和寬度設(shè)置。

代碼示例

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.nav{
width: 100%;
height: 100px;
background-color: red;
}

代碼效果

.item{ position: fixed; top:50px; right:100px; margin: 0; padding: 0; display: flex;

代碼效果

.item li{ list-style: none;｝

6、再給添加相對定位、外邊距、內(nèi)邊距、字符轉(zhuǎn)為大寫，顏色、粗細(xì)，underline定義文本下的一條線。

代碼示例

.item li a{
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: uppercase;/*將字符轉(zhuǎn)為大寫*/
color: #262626;
font-weight: bold;
/* transition: 0.5s; */｝

7、使用hover鼠標(biāo)指針浮動(dòng)樣式

}
.item li a:hover{
color:#fff;
}

代碼效果

.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、最后一個(gè)設(shè)置，hover鼠標(biāo)滑過修改顏色為黑色添加旋轉(zhuǎn)和縮放。

代碼示例

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.item li a:hover:after{ 
transform: scale(1);｝

ok,html+css編輯代碼完成。

推薦學(xué)習(xí)：CSS3視頻教程

以上就是手把手教你使用css3制作炫酷的導(dǎo)航欄效果（代碼詳解）的詳細(xì)內(nèi)容，更多請關(guān)注有啊網(wǎng)站百科其它相關(guān)文章！

• 喜歡（11）
• 不喜歡（1）

本文鏈接：http://www.yongsung168.cn/ask-css/24957.html