CSS 可伸縮圓角導航選單
分享一段程式碼例項,它實現了滑鼠懸浮可伸縮導航選單效果。
通過CSS3實現,在以前實現起來比較困難,當前可以比較輕鬆的實現。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } body { background-color: #EAEAEA; } #nav { margin-top: 100px; margin-left: 50px; display: inline-block; } .item { float: right; padding: 6px; background-color: #EAEAEA; border-radius: 50px; margin-left: -40px; list-style: none; } .link { display: inline-block; background-color: #65ba99; width: 85px; height: 50px; border-radius: 50px; transition: .5s; text-align: center; text-decoration: none; } .link:hover { width: 130px; background-color: #77c2a5; } .link:hover span { opacity: 1; } ul li:last-child a { width: 60px; height: 60px; transform: scale(.84); } ul li:last-child { padding: 0; } #nav li:last-child a:hover { width: 60px; transform: scale(.95) !important; margin-right: 5px; } span { color: #DFDFDF; line-height: 50px; opacity: 0; transition: .5s; } </style> </head> <body> <ul id="nav"> <li class="item"><a href="#" class="link"><span>螞蟻部落一</span></a></li> <li class="item"><a href="#" class="link"><span>螞蟻部落二</span></a></li> <li class="item"><a href="#" class="link"><span>螞蟻部落三</span></a></li> <li class="item"><a href="#" class="link"><span>螞蟻部落四</span></a></li> <li class="item"><a href="#" class="link"></a></li> </ul> </body> </html>
滑鼠懸浮可以測試相應的效果,更多內容可以參閱如下文章。
相關閱讀:
(1).border-radius參閱CSS border-radius一章節。
(2).opacity參閱CSS opacity 透明度一章節。
(3).transition參閱CSS transition一章節。
(4).:last-child參閱CSS E:last-child一章節。
相關文章
- css3實現的可伸縮圓角導航選單CSSS3
- 垂直可伸縮的導航選單例項程式碼單例
- CSS jquery圓角帶陰影的導航選單程式碼分享CSSjQuery
- js頂部可以伸縮的導航選單效果JS
- 水平伸縮動畫導航選單實現詳解動畫
- 滑鼠懸浮可以上下伸縮的導航選單
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- CSS垂直導航選單CSS
- CSS 動態導航選單CSS
- css3滑鼠懸浮展開收縮導航選單CSSS3
- CSS導航條選單:帶小三角形CSS
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- 純CSS打造淘寶導航選單欄CSS
- 純css製作導航下拉選單CSS
- CSS 平行四邊形導航選單CSS
- 自定義view之可伸縮的圓弧與扇形View
- 導航欄實現移入後彈出左右伸縮的過渡(css3)CSSS3
- 圓角select下拉選單
- JavaScript可摺疊屬性導航選單JavaScript
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- CSS3橫向導航選單效果CSSS3
- jQuery css3環形導航選單jQueryCSSS3
- CSS3麵包屑導航選單CSSS3
- css簡單水平導航選單程式碼例項CSS
- css3實現動態導航選單CSSS3
- css樹形導航選單程式碼例項CSS
- css3水平滑動導航選單效果CSSS3
- Silverlight中利用Blend繪製可伸縮的Tab選單
- EXTjs 伸縮選單佈局accordion 和嚮導佈局cardlayoutJS
- 圓滑細膩!那些使用圓形導航選單的漂亮網頁設計網頁
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- CSS-伸縮佈局CSS
- css實現立體效果橫向導航選單CSS
- CSS3 扇形導航選單程式碼例項CSSS3