CSS3 飞行风格的面包屑导航栏

Flight Breadcrumbs CSS3 nth-child magic on hover 可用于在线旅游类型的网站。

css3，界面组件，breadcrumb

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2476
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css");
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}
body {
    padding: 50px 0;
    font: 12px/1 'Open Sans', sans-serif;
    color: #555;
    background-color: #eee;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1 {
    margin: 0 0 50px;
    font-size: 25px;
    font-weight: 400;
    text-align: center;
}
h1 span {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    color: #aaa;
    /* buildung the elements */
}
.breadcrumbs {
    display: flex;
    width: 900px;
    height: 40px;
    line-height: 38px;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    border: 1px solid #333;
    background: #f5f5f5;
}
.single {
    flex: 1;
    position: relative;
    font-weight: 600;
    text-align: center;
}
.search {
    flex: 1;
    font-weight: 600;
    text-align: center;
    background-color: #eb6;
}
.search:last-child:before {
    content: '\f002';
    font-family: fontawesome;
    margin: 0 10px;
    /* building the arrows */
}
.single:before,
.single:after {
    content: '';
    position: absolute;
    top: -1px;
    left: 100%;
    z-index: 1;
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid transparent;
}
.single:before {
    margin-left: 1px;
    border-left-color: #333;
}
.single:after {
    border-left-color: #f5f5f5;
    /* building the colors */
}
.single:nth-child(n+1) {
    background: #8ac;
}
.single:nth-child(n+4) {
    background: #acc3db;
}
.single:nth-child(n+7) {
    background: #cfddeb;
}
.single:nth-child(n+1):after {
    border-left-color: #8ac;
}
.single:nth-child(n+4):after {
    border-left-color: #acc3db;
}
.single:nth-child(n+7):after {
    border-left-color: #cfddeb;
}
.single i {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 10px;
}
.single:nth-child(3n+1) i {
    background-image: url("http://abload.de/img/1qnu2o.png");
}
.single:nth-child(3n+2) i {
    background-image: url("http://abload.de/img/24iubo.png");
}
.single:nth-child(3n) i {
    background-image: url("http://abload.de/img/33wu2q.png");
    /* building the hovers */
}
.single:nth-child(-n+9):hover ~ .single:nth-child(-n+9) {
    color: #aaa;
    background: #f5f5f5;
}
.single:nth-child(-n+9):hover ~ .single:nth-child(-n+9):before {
    border-left-color: #d5d5d5;
}
.single:nth-child(-n+9):hover ~ .single:nth-child(-n+9):after {
    border-left-color: #f5f5f5;
}
.single:nth-child(-n+9):hover ~ .single:nth-child(-n+9) i {
    opacity: 0.3;
}

HTML

Flight Breadcrumbs CSS3 nth-child magic on hover 可用于在线旅游类型的网站。

css3，界面组件，breadcrumb

编辑器支持Emmet

快捷键

Flight Breadcrumbs CSS3 nth-child magic on hover 可用于在线旅游类型的网站。

css3，界面组件，breadcrumb

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：