CSS3 code implementation steps for making circular style breadcrumbs-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS3 code implementation steps for making circular style breadcrumbs

Nov 30, 2017 pm 02:22 PM

css css3

Everyone who works on the front end knows about breadcrumb navigation. Breadcrumb navigation’s function is to tell visitors their current location in the website and how to return. Today we will use CSS3 to implement the breadcrumb navigation effect. Here is the example code, let’s take a look.

&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;CSS3圆形风格面包屑导航&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://css.h5course.cn/reset.css&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;CSS3圆形风格面包屑导航&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;text icon-file&quot;&gt;移动端&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;text icon-folder-open&quot;&gt;JS&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;text icon-code&quot;&gt;CSS3&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;text icon-beaker&quot;&gt;HTML5&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-home&quot;&gt;HOME&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!