合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

CSS3实现美观的飘带样式菜单及代码

  • 时间:2016-05-27
  • 发布:合肥web培训
  • 来源:达内新闻

合肥web培训专家分享一个非常有特色的CSS3菜单插件,拥有飘带的外观,同时,具有3D立体的视觉效果,有需要的达内web培训班学员可以参考着用下。代码如下:

HTML代码

<div class='ribbon'>
 <a href='#'><span>Home</span></a>
 <a href='#'><span>About</span></a>
 <a href='#'><span>Services</span></a>
 <a href='#'><span>Contact</span></a>
</div>

CSS代码

* {
 /* Basic CSS reset */
 margin:0;
 padding:0;
}

body {
 /* These styles have nothing to do with the ribbon */
 background:url(dark_wood.png) 0 0 repeat;
 padding:35px 0 0;
 margin:auto;
 text-align:center;
}

.ribbon {
 display:inline-block;
}

.ribbon:after, .ribbon:before {
 margin-top:0.5em;
 content: "";
 float:left;
 border:1.5em solid #fff;
}

.ribbon:after {
 border-right-color:transparent;
}

.ribbon:before {
 border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
 color:#000;
 text-decoration:none;
 float:left;
 height:3.5em;
 overflow:hidden;
}

.ribbon span {
 background:#fff;
 display:inline-block;
 line-height:3em;
 padding:0 1em;
 margin-top:0.5em;
 position:relative;

 -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
 -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
 -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
 -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
 transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
 background:#FFD204;
 margin-top:0;
}

.ribbon span:before {
 content: "";
 position:absolute;
 top:3em;
 left:0;
 border-right:0.5em solid #9B8651;
 border-bottom:0.5em solid #fff;
}

.ribbon span:after {
 content: "";
 position:absolute;
 top:3em;
 right:0;
 border-left:0.5em solid #9B8651;
 border-bottom:0.5em solid #fff;
}
上一篇:超好看的jQuery百叶窗焦点图动画及代码
下一篇:web前端工程师的10个最新工具

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省