之前的文章《教你使用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>
程式碼效果
#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影片教學
#以上是手把手教你使用css3製作酷炫的導覽列效果(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!