如何使用CSS3制作立体效果导航菜单

这篇文章给大家分享的是有关如何使用CSS3制作立体效果导航菜单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

先给大家展示效果图，效果如下：

编程笔记友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。

源代码：

CSS Code复制内容到剪贴板

1.     

2. "keleyi-com-nav black">    

4. "http://keleyi.com/a/bjac/utovcdwr.htm">Home
    
6. "http://keleyi.com/dev/dba.htm">About Me
    
8. "http://keleyi.com/dev/cdbafffcac.htm">Portfolio
    
10. "http://keleyi.com/a/bjac/kpiehx.htm">Blog
    
12. "http://keleyi.com/a/bjac/nmwpqgag.htm">Resources
    
14. "http://keleyi.com/game//">Contact Me
    

15.     

16. "keleyi-com-nav red">    

18. "http://keleyi.com/">首页
    
20. "http://keleyi.com/ablut/">关于
    
22. "http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX
    
24. "http://keleyi.com/a/bjac/dib.htm">导航样式
    
26. "http://keleyi.com/a/bjac/mtpy.htm">侧边导航
    
28. "http://keleyi.com/dev/ae.htm">树形菜单
    

29.     

30. "keleyi-com-nav blue">    

32. "http://keleyi.com/a/bjac/et.htm">Home
    
34. "http://keleyi.com/a/bjac/wjqxm.htm">About Me
    
36. "http://keleyi.com/a/bjac/slnymte.htm">Portfolio
    
38. "http://keleyi.com/a/bjac/mnmpmbv.htm">Blog
    
40. "http://keleyi.com/a/bjac/cef.htm">Resources
    
42. "http://keleyi.com/a/bjac/bedbffcaaffa.htm">Contact Me
    

43.     

44. "keleyi-com-nav green">    

46. "http://keleyi.com/">首页
    
48. "http://keleyi.com/ablut/">关于
    
50. "http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX
    
52. "http://keleyi.com/a/bjac/dib.htm">导航样式
    
54. "http://keleyi.com/a/bjac/mtpy.htm">侧边导航
    
56. "http://keleyi.com/dev/ae.htm">树形菜单
    

57.    
    

下面给大家分享使用css3和伪元素制作的一个立体导航条

CSS Code复制内容到剪贴板

1.     

2. "en">    

3.     

4. "UTF-8">    

5.     

6. "stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">    

7.     

8.     

9.     

10. "nav">    

12. "">Home
    
14. "">About Me
    
16. "">Portfolio
    
18. "">Blog
    
20. "">Resources
    
22. "">Contact Me
    

23.     

24.     

25.   

感谢各位的阅读！关于“如何使用CSS3制作立体效果导航菜单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！