CSS3扁平化面包屑导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3扁平化面包屑导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title>CSS3扁平化面包屑导航</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
  <link href="css/font-awesome.css" rel="stylesheet">
  <h1>CSS3扁平化面包屑导航</h1>
<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
</body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;}
body{text-align:center;background-color:#34495e;}
h1{font-weight:100;font-size:32px;padding:40px;color:#fff;}
#breadcrumb{list-style:none;display:inline-block;}
#breadcrumb .icon{font-size:14px;}
#breadcrumb li{float:left;}
#breadcrumb li a{color:#FFF;display:block;background:#3498db;text-decoration:none;position:relative;height:40px;line-height:40px;padding:0 10px 0 5px;text-align:center;margin-right:23px;}
#breadcrumb li:nth-child(even) a{background-color:#2980b9;}
#breadcrumb li:nth-child(even) a:before{border-color:#2980b9;border-left-color:transparent;}
#breadcrumb li:nth-child(even) a:after{border-left-color:#2980b9;}
#breadcrumb li:first-child a{padding-left:15px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-ms-border-radius:4px 0 0 4px;-o-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}
#breadcrumb li:first-child a:before{border:none;}
#breadcrumb li:last-child a{padding-right:15px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-ms-border-radius:0 4px 4px 0;-o-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}
#breadcrumb li:last-child a:after{border:none;}
#breadcrumb li a:before,#breadcrumb li a:after{content:"";position:absolute;top:0;border:0 solid #3498db;border-width:20px 10px;width:0;height:0;}
#breadcrumb li a:before{left:-20px;border-left-color:transparent;}
#breadcrumb li a:after{left:100%;border-color:transparent;border-left-color:#3498db;}
#breadcrumb li a:hover{background-color:#1abc9c;}
#breadcrumb li a:hover:before{border-color:#1abc9c;border-left-color:transparent;}
#breadcrumb li a:hover:after{border-left-color:#1abc9c;}
#breadcrumb li a:active{background-color:#16a085;}
#breadcrumb li a:active:before{border-color:#16a085;border-left-color:transparent;}
#breadcrumb li a:active:after{border-left-color:#16a085;}

CSS代码(style.scss):

@import "compass/css3";$blue-gray:#34495e;$blue-gray-darken:#2c3e50;$blue:#3498db;$blue-darken:#2980b9;$green:#1abc9c;$green-darken:#16a085;*{margin:0;padding:0;@include box-sizing(border-box);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;}
body{text-align:center;background-color:$blue-gray;}
h1{font-weight:100;font-size:32px;padding:40px;color:#fff;}
#breadcrumb{list-style:none;display:inline-block;.icon{font-size:14px;}
li{float:left;a{color:#FFF;display:block;background:$blue;text-decoration:none;position:relative;height:40px;line-height:40px;padding:0 10px 0 5px;text-align:center;margin-right:23px;}
&:nth-child(even){a{background-color:$blue-darken;&:before{border-color:$blue-darken;border-left-color:transparent;}
&:after{border-left-color:$blue-darken;}
}
}
&:first-child{a{padding-left:15px;@include border-radius(4px 0 0 4px);&:before{border:none;}
}
}
&:last-child{a{padding-right:15px;@include border-radius(0 4px 4px 0);&:after{border:none;}
}
}
a{&:before,&:after{content:"";position:absolute;top:0;border:0 solid $blue;border-width:20px 10px;width:0;height:0;}
&:before{left:-20px;border-left-color:transparent;}
&:after{left:100%;border-color:transparent;border-left-color:$blue;}
&:hover{background-color:$green;&:before{border-color:$green;border-left-color:transparent;}
&:after{border-left-color:$green;}
}
&:active{background-color:$green-darken;&:before{border-color:$green-darken;border-left-color:transparent;}
&:after{border-left-color:$green-darken;}
}
}
}
}

附件:下载该文件资源,减少时间成本(增值服务)