如何使用css3制作炫酷的導航欄效果

本篇內容介紹了“如何使用css3制作炫酷的導航欄效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

炫酷的導航欄效果圖如下

CSS3制作炫酷的導航欄效果的方法

1、新建一個html文件，首先寫div標簽輸入寫<ul>調用這個樣式item，就是你網站CSS里定義的樣式，可以編輯里面的內容，class是類選擇器，可以純靜態在網頁中控制字體顏色。

代碼示例

<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/css串代碼然后在style標簽寫外邊距、內邊距、段落設置字體，height定義高度為2000px。

代碼示例

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

3、接下來，給導航欄添加背景在nav輸入背景顏色、高度和寬度設置。

代碼示例

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

代碼效果

4、接著，給導航欄加固定在頁面頂部。

代碼示例

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

代碼效果

5、圖像設置為列表中的列表項目標記。

代碼示例

.item li{
list-style: none;｝

6、再給添加相對定位、外邊距、內邊距、字符轉為大寫，顏色、粗細，underline定義文本下的一條線。

代碼示例

.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、使用hover鼠標指針浮動樣式

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

代碼效果

8、給導航欄添加邊緣設置，使用transition屬性設置過渡效果的時間，使用transgorm拉長邊框兩倍，然后使用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制作炫酷的導航欄效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！