基于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来制作文字霓虹灯效果（付完整代码）