css3實現的水平立體動態導航選單效果
本章節分享一段程式碼例項,它實現了水平導航選單效果。
它利用css3實現,實現了具有動態效果的立體導航選單,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; margin: 0 auto; text-align: center; } .ribbon { padding-top: 55px; display: inline-block; } .ribbon:after, .ribbon:before { margin-top: 0.5em; content: ""; float: left; border: 1.5em solid #fff; } .ribbon:after { border-right-color: transparent; } .ribbon:before { border-left-color: transparent; } .ribbon a:link, .ribbon a:visited { color: #000; text-decoration: none; float: left; height: 3.5em; overflow: hidden; } .ribbon span { background: #fff; display: inline-block; line-height: 3em; padding: 0 1em; margin-top: 0.5em; position: relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background: #FFD204; margin-top: 0; } .ribbon span:before { content: ""; position: absolute; top: 3em; left: 0; border-right: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; } .ribbon span:after { content: ""; position: absolute; top: 3em; right: 0; border-left: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; } </style> </head> <body> <div class='ribbon'> <a href='#'><span>首頁</span></a> <a href='#'><span>螞蟻部落</span></a> <a href='#'><span>產品展示</span></a> <a href='#'><span>新聞資訊</span></a> <a href='#'><span>技術文章</span></a> <a href='#'><span>softwhy.com</span></a> </div> </body> </html>
相關文章
- css3水平滑動導航選單效果CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3
- css3實現動態導航選單CSSS3
- css實現立體效果橫向導航選單CSS
- ul li實現的水平導航選單
- CSS3立體導航選單程式碼例項CSSS3
- CSS3 滑鼠懸浮立體翻滾的導航選單CSSS3
- CSS3橫向導航選單效果CSSS3
- css3實現的立體滾動效果CSSS3
- css3實現緩慢下拉手風琴導航選單效果CSSS3
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- 水平伸縮動畫導航選單實現詳解動畫
- js實現的響應式導航選單效果JS
- CSS 動態導航選單CSS
- css3實現動態圓形導航欄CSSS3
- css3實現的3D翻滾導航選單CSSS33D
- css3實現的可伸縮圓角導航選單CSSS3
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- jQuery底部跟隨水平導航選單jQuery
- CSS多級導航選單效果CSS
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- css3滑鼠懸浮背景滑動導航選單CSSS3
- 具有響應式效果的導航選單
- css簡單水平導航選單程式碼例項CSS
- CSS3垂直摺疊導航選單CSSS3
- jQuery css3環形導航選單jQueryCSSS3
- CSS3麵包屑導航選單CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- 使用 jQuery 和 CSS3 製作滑動導航選單jQueryCSSS3
- 具有彈性效果的右鍵導航選單
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- jQuery滑動導航選單jQuery
- JavaScript橫向二級導航選單效果JavaScript
- 拖動滾動條實現側欄導航定位效果
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- js頂部可以伸縮的導航選單效果JS