首頁  >  文章  >  web前端  >  手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

奋力向前
奋力向前原創
2021-08-31 16:53:415186瀏覽

之前的文章《教你使用css3為字體添加立體效果(附程式碼)》中,為大家介紹了怎麼使用css3為字體添加立體效果。以下這篇文章跟大家介紹怎麼使用CSS3製作酷炫的導覽列效果,我們一起看看怎麼做。

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

酷的導覽列效果圖如下

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

CSS3製作酷炫的導覽列效果的方法

1、新建一個html文件,先寫div標籤輸入寫<ul></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>

程式碼效果

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

#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;
}

程式碼效果

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

4、接著,將導覽列加固定在頁面頂部。

程式碼範例

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

程式碼效果

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

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;
}

程式碼效果

手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)

8、為導覽列新增邊緣設置,使用transition屬性設定過渡效果的時間,使用transgorm拉長邊框兩倍,然後使用opacity邊距不顯示。

程式碼範例

.item li a:before{

content:&#39;&#39;;
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:&#39;&#39;;
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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn