當前位置:主頁 > 網站優化 >

CSS3實現圓形風格面包屑導航

作者: 奕星SEO 分類: 網站優化 發布時間: 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.pxynqa.icu/webyouhua/1379.html
上一篇:<<三大框架之中我們為什么會偏愛VUE
下一篇:1860種設計字體分享>>
吉林时时历史开奖号码