一個純CSS3實現的圓形面包屑導航

個好玩的CSS3圓形面包屑導航，使用純CSS3實現的效果，還是比較驚艷的，現整理一下，效果如下：

一路帶你看風景，哼哼！

HTML的結構如下：

<ul class="breadcrumb">
  <li> <a href="#"> <span class="icon icon-arrow-right"></span> <span class="text">馬壩</span> </a></li>
  <li> <a href="#"> <span class="icon icon-ok-circle"></span> <span class="text">盱眙</span> </a> </li>
  <li> <a href="#"> <span class="icon icon-eye-open"></span> <span class="text">淮安</span> </a> </li>
  <li> <a href="#"> <span class="icon icon-plane"></span> <span class="text">江蘇</span> </a> </li>
  <li> <a href="#"> <span class="icon icon-home"></span> </a> </li>
</ul>

引入兩個CSS文件：

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet">

頭條里不知道如下上傳源碼文件，先研究一下先。

SS圓形展開菜單。

·1.設置開關狀態為checked時子菜單的展開收縮動畫。

·2.設置開關狀態為checked時子菜單的展開收縮動畫。

·3.設置開關狀態為checked時子菜單的展開收縮動畫。

·4.重置開關細節樣式。

·5.添加子菜單的詳細樣式。

·6.設置開關狀態為checked時子菜單的展開收縮動畫。

·7.設置開關狀態為checked時子菜單的展開收縮動畫。

近在做公司的登錄頁，UE同學希望第三方登錄的圖標在hover的時候有一個圓形的縮放效果（原話是波紋效果-_-||），效果參考騰訊新聞和網易新聞的分享按鈕。

騰訊新聞的分享按鈕hover效果（新聞頁面）：
網易新聞的分享按鈕hover效果（新聞頁面）：

文章分享之前小編推薦一下我的前端學習群：611256580，里面都是學習前端的，如果你想制作酷炫的網頁，想學習前端知識，小編歡迎你的加入。小編會在群中不定期分享干貨源碼，包括我精心整理的一份前端教程。歡迎各位感興趣的的小伙伴。

看了一下這兩個頁面的源碼，主要是用了 transform:scale() 和 transition ，自己的最終的實現效果如下：

實現思路大體是模仿網易新聞的，布局如下：

<a href="" class="third-party third-party-weixin"> <i></i>
<span></span>
</a>

外層的a標簽用于整體容器和跳轉，內層的i標簽使用偽元素::before和::after分別作為背景色和前景色，這兩個偽元素均絕對定位，垂直水平居中，::after設置縮放屬性 transform:scale(0) ,過渡動畫屬性 transition: all .3s ，正常情況下::before可見，當hover的時候::after設置縮放屬性 transform:scale(1) ，兩個相鄰絕對定位元素在不設置z-index的情況下，文檔流在后的元素在上，并且在有過渡動畫屬性 transition 的情況下實現了縮放動畫效果。

span標簽用于展示logo，可以是圖片或者web字體，只要透明就可以，這里用了圖片。 CSS（此處使用的是sass）如下：

.third-party { position: relative; // 為了兼容firefox必須要變成block或inline-block
display: inline-block; width: 48px; height: 48px; margin: {
left: 6%; right: 6%;
}
&:hover { i {
&::after { transform: scale(1);
}
}
} span { // position: relative是為了兼容firefox和IE
position: relative; display: block; width: 48px; height: 48px; background-size: 30px; background-position: center; background-repeat: no-repeat;
} i { position: absolute; top: 0; left: 0; width: 48px; height: 48px;
&::before { content: ''; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
&::after { content: ''; transition: all .3s; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0);
}
}
&.third-party-weixin { span { background-image: url(../images/login/weixin-64.png);
} i {
&::before { background-color: #20a839;
}
&::after { background-color: #30cc54;
}
}
}
}

這樣這個簡單的圓形縮放動畫就完成啦。

在線咨詢

上一篇：HTML&CSS案例—咖啡店（定位+布局+CSS3）
下一篇：HTML頭部 <head>

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個純CSS3實現的圓形面包屑導航

您的項目需求