html是l面包屑效果,CSS3 圆形风格面包屑代码详解

CSS3圆形风格面包屑导航

html, body {

height: 100%;

padding: 0 100px;

background-color: #59a386;

}

.title {

padding: 50px 0;

color: #77c2a5;

font-size: 25px;

font-weight: bold;

}

ul.breadcrumb {

display: inline-block;

margin-left: 50px;

}

/*实现每个导航项的基本样式*/

ul.breadcrumb li {

float: right;

padding: 5px;

margin: 3px 0 0 -50px;

background-color: #59a386;

border-radius: 50px;

transition: all 0.2s linear 0s;

}

ul.breadcrumb li a {

display: block;

overflow: hidden;

min-width: 50px;

width: 50px;

height: 50px;

padding: 0 33.33px 0 52px;

color: #509378;

background-color: #65ba99;

text-align: center;

line-height: 50px;

border-radius: 50px;

transition: all 0.2s linear 0s;

box-sizing: border-box;

}

/*控制每个导航项中文本的出现*/

ul.breadcrumb li a .text {

display: none;

opacity: 0;

}

ul.breadcrumb li a:hover {

width: 150px;

background-color: #77c2a5;

}

ul.breadcrumb li a:hover .text {

display: inline-block;

opacity: 1;

}

/*处理第一个导航项*/

ul.breadcrumb li:last-child a {

padding: 0;

}

ul.breadcrumb li:last-child:hover {

padding: 3px;

margin-top: 0;

}

ul.breadcrumb li:last-child:hover a {

width: 60px;

height: 60px;

line-height: 60px;

}

CSS3圆形风格面包屑导航

• 移动端

• JS

• CSS3

• HTML5

• HOME