css3實現的立體導航選單效果程式碼例項
本章節分享一段程式碼例項,它利用css3實現了立體導航選單的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html lang="en"> <head> <meta name="author" content="http://www.softwhy.com/" /> <meta charset="utf-8"> <title>螞蟻部落</title> <style> body { background: #ebebeb; } .nav { width: 560px; height: 50px; font: bold 0/50px Arial; text-align: center; margin: 40px auto 0; background: #f65f57; /*製作圓*/ border-radius: 8px; /*製作導航立體風格*/ box-shadow: 0px 7px red; } .nav a { display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; color: #fff; } .nav a:hover { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); text-decoration: none; } .nav li { position: relative; display: inline-block; padding: 0 16px; font-size: 13px; text-shadow: 1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; } /*刪除第一項和最後一項導航分隔線*/ .nav li:first-child::before { background-image: none; } /*使用偽元素製作導航列表項分隔線*/ .nav li:before { content: ""; color: #666; position: absolute; top: 18px; height: 20px; left: -1px; width: 1px; background-image: linear-gradient(to bottombottom,#f65f57,#993333,#f65f57); } </style> </head> <body> <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li> </ul> </body> </html>
相關文章
- CSS3立體導航選單程式碼例項CSSS3
- css3實現的水平立體動態導航選單效果CSSS3
- 純CSS實現的二級導航選單效果程式碼例項CSS
- CSS3 扇形導航選單程式碼例項CSSS3
- css實現立體效果橫向導航選單CSS
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- 蜂巢式導航選單程式碼例項
- css簡單水平導航選單程式碼例項CSS
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- javascript樹形導航選單例項程式碼JavaScript單例
- css樹形導航選單程式碼例項CSS
- 響應式導航選單程式碼例項
- 物件導向實現的tab選項卡效果程式碼例項物件
- css立體效果程式碼例項CSS
- 垂直可伸縮的導航選單例項程式碼單例
- css3實現的折角效果程式碼例項CSSS3
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- CSS3 滑鼠懸浮立體翻滾的導航選單CSSS3
- jquery實現的選項卡效果例項程式碼jQuery
- CSS3橫向導航選單效果CSSS3
- 側欄能夠定位的導航選單程式碼例項
- 可以固定的頂部的導航選單簡單例項程式碼單例
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- 垂直樹形多級導航選單程式碼例項
- CSS製作橫向導航選單例項程式碼CSS單例
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- css3實現緩慢下拉手風琴導航選單效果CSSS3
- css3實現動態導航選單CSSS3
- js實現的垂直選項卡效果程式碼例項JS