基于html和CSS3制作酷炫的導航欄

2020-03-24 16:04:08

字體：大中小

來源：轉載

供稿：網友

head metacharset= UTF-8 !----編碼----- metaname= Generator content= EditPlus metaname= Author content= 黃濤 metaname= Keywords content= 關鍵字，搜索引擎 metaname= Description content= 描述語言 title 案例 /title styletype= text/css *{margin:0;padding:0;} body{background:url( images/bg_title.jpg )repeat-x,url( images/bg.jpg );} #Logo{ width:895px;height:45px; /*margin:上下左右*/ margin:50pxauto; border-radius:10px; /*html+css3漸變畫圖*/ background-image:-webkit-linear-gradient(rgba(41,41,41,0.75)0%,rgba(54,54,54,0.72)50%,rgba(24,23,23,0.94)51%); box-shadow:1px1px33px#fff;/*設計陰影的*/ } #Logoulli { width:127px;height:45px; list-style:none;/*去掉圓點*/ float:left;/*水平顯示*/ color:white;/*#fff*/ font-size:18px; font-family: 微軟雅黑 ; text-align:center; line-height:45px;/*行高跟高度一致時，豎直居中*/ border-right:1pxsolid#000;/*右邊框*/ } #Logoullia { color:white;/*#fff*/ font-size:18px; font-family: 微軟雅黑 ; text-decoration:none; } #Logoulli:hover { background:rgba(10,5,5,0.45); } #Logoulli.first:hover { border-radius:10px0px0px10px;/*左上左下圓弧顯示*/ } #Logoulli.last:hover { border-radius:0px10px10px0px;/*右上右下圓弧顯示*/ } #Logoulliulli { border:none; border-top:1pxsolid#989898; background:rgba(10,5,5,0.45);/*顏色透明度*/ border-radius:10px; } #Logoulliul { display:none;/*不顯示*/ } #Logoulliulli:hover { background:rgba(10,5,5,0.8);/*顏色透明度*/ border-radius:10px; } #Logoulli:hoverul { display:block; -webkit-animation:roll1sease;/*roll旋轉名稱，1s旋轉效果*/ } @-webkit-keyframesroll/*roll旋轉名稱與上面一致*/ { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } /style /head body divid= Logo ul li >代碼超簡單，希望對大家學習制作html和css3制作超酷導航欄有所幫助。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：如何使用HTML5+CSS3來創建淡入效果的提示框（附完整代碼）

下一篇：如何使用css3+html5來制作文字霓虹燈效果（付完整代碼）