当前位置:主页 > 网站优化 >

CSS3实现圆形风格面包屑导航

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-15 16:17 阅读量:

在我们的前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。

CSS3实现圆形风格面包屑导航

主要功能是用于选择标签,有如下几个常用的选择器。

选择器E:last-child(n):匹配其父元素下的最后一个子元素。

选择器E:first-child:匹配其父元素下的第一个子元素。

如下是选择器E:last-child的书写形式:

ul.breadcrumb li:last-child a { padding: 0; }

CSS3圆角

主要功能是为标签添加圆角样式,有如下的属性:

border-radius : none | percent | px;

none代表的是不设置圆角,percent表示可以使用百分数实现圆角的设置,px表示可以使用像素值实现圆角的设置。如下:

border-radius: 50%;

CSS3过渡

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标悬停、鼠标单击、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

借助CSS3的transition可以让元素的样式变化体现的更为平滑,其主要使用方式如下:

transition: all 0.2s linear 0s;

上述代码中,属性的从左往右依次代表的是:执行变换的属性(all表示所有变化的样式)、变换延续的时间、在延续时间段变换的速率变化、变换的延迟时间。

功能的实现思路   

1. 结构与样式分析

当前效果主要是实现一个导航栏的制作,所以在结构上选用ul~li~a这样的标签组合,然后在a标签中放置span以放置导航的文本信息。针对样式来说,需要配合上标签的hover状态,然后以相应的盒模型属性配合上CSS3的相关语法实现最终的界面效果。

2 .基本功能逻辑

首先使用margin负值与box-sizing属性实现样式布局;

然后借助CSS3的圆角与过渡实现样式的处理;

最后对相应的标签书写鼠标悬停的hover状态,实现样式的平滑过渡变化。

具体的实现代码与解析

1 .实现初始样式的制作

针对圆形导航的展示,不对li标签设置宽高,同时使用CSS3圆角处理每个子导航选项,书写上CSS3过渡的相应操作,具体代码如下:

/*实现每个导航项的基本样式*/ 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; }

2 .实现hover状态下的变化

借助标签的hover状态,在鼠标悬停到该导航项上时,导航项的大小变大,span标签的文字需要出现,具体代码如下:

/*控制每个导航项中文本的出现*/ 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; }

成品代码

<html> <head> <meta charset="utf-8"> <title>CSS3圆形风格面包屑导航</title> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> 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; } </style> </head> <body> <h1 class="title">CSS3圆形风格面包屑导航</h1> <ul class="breadcrumb"> <li> <a href="#"> <span class="text icon-file">移动端</span> </a> </li> <li> <a href="#"> <span class="text icon-folder-open">JS</span> </a> </li> <li> <a href="#"> <span class="text icon-code">CSS3</span> </a> </li> <li> <a href="#"> <span class="text icon-beaker">HTML5</span> </a> </li> <li> <a href="#"> <span class="icon icon-home">HOME</span> </a> </li> </ul> </body> </html>
本文链接地址:http://www.seohuizhou.com/webyouhua/1379.html
上一篇:<<三大框架之中我们为什么会偏爱VUE
下一篇:1860种设计字体分享>>