CSS3的一個簡單導航欄實現

 

   

上面是一個效果圖，代碼在下面：

html

XML/HTML Code復制內容到剪貼板

1. <nav>
2. <ul class="nav-ul">
3. <li>
4. <a href="/">首頁</a>
5. </li>
6. <li>
7. <a href="/category/frontend">Web前端</a>
8. <ul>
9. <li class="nav-effect-1">
10. <a href="/category/frontend/javascript">JavaScript</a>
11. </li>
12. <li class="nav-effect-2">
13. <a href="/category/frontend/jq">JQuery</a>
14. </li>
15. <li class="nav-effect-3">
16. <a href="/category/frontend/style">CSS</a>
17. </li>
18. <li class="nav-effect-4">
19. <a href="/category/frontend/html">HTML</a>
20. </li>
21. </ul>
22. </li>
23. <li>
24. <a href="/category/end">後端</a>
25. <ul>
26. <li class="nav-effect-1">
27. <a href="/category/end/python-end">Python</a>
28. </li>
29. <li class="nav-effect-2">
30. <a href="category/end/php">PHP</a>
31. </li>
32. </ul>
33. </li>
34. <li>
35. <a href="/category/trivial">瑣碎雜類</a>
36. <ul>
37. <li class="nav-effect-1">
38. <a href="/category/trivial/linux">Linux</a>
39. </li>
40. <li class="nav-effect-2">
41. <a href="/category/trivial/ajax">Ajax</a>
42. </li>
43. </ul>
44. </li>
45. <li>
46. <a href="/category/life">我的生活</a>
47. <ul>
48. <li class="nav-effect-1">
49. <a href="/category/life/college">College</a>
50. </li>
51. <li class="nav-effect-2">
52. <a href="/category/life/review">Review</a>
53. </li>
54. <li class="nav-effect-3">
55. <a href="/category/life/sentiment">Sentiment</a>
56. </li>
57. </ul>
58. </li>
59. <li>
60. <a href="#">關於我</a>
61. <ul>
62. <li class="nav-effect-1">
63. <a href="/contribute">友情鏈接</a>
64. </li>
65. <li class="nav-effect-2">
66. <a href="/message">留言板</a>
67. </li>
68. </ul>
69. </li>
70. </ul>
71. </nav>

css:

CSS Code復制內容到剪貼板

1. *{
2. margin:0 auto;
3. }
4. body{
5. background-color: #EEEEEE;
6. font-family: Microsoft Yahei,Arial,sans-serif;
7. }
8. nav{
9. width: 100%;
10. background-color: #455552;
11. position: relative;
12. width: 650px;
13. margin-top: 100px;
14. }
15. .nav-ul{
16. list-style: none;
17. }
18. .nav-ul>li{
19. display: inline-block;
20. position: relative;
21. }
22. .nav-ul a{
23. text-decoration: none;
24. color: #FFF;
25. display: inline-block;
26. padding: 10px 20px;
27. }
28. .nav-ul a:hover{
29. background-color: #1ABC9C;
30. }
31. .nav-ul a:hover+ul li{
32. opacity:1;
33. -webkit-transform: rotateY(0deg);
34. transform: rotateY(0deg);
35. }
36. .nav-ul a+ul{
37. list-style: none;
38. position: absolute;
39. transition: opacity 0.5s;
40. -webkit-perspective: 800;
41. -webkit-transform-style: preserve-3d;
42. }
43. .nav-ul a+ul:hover li{
44. opacity: 1;
45. -webkit-transform: rotateY(0deg);
46. transform: rotateY(0deg);
47. }
48. .nav-ul a+ul li{
49. position: relative;
50. left: -40px;
51. opacity: 0;
52. width: 150px;
53. transition: transform 1.5s,opacity 0.8s;
54. }
55. .nav-ul a+ul a{
56. display: inline-block;
57. width: 75%;
58. background-color: rgba(26,188, 156, 0.75);
59. }
60. .nav-effect-1{
61. transform: rotateY(90deg) translateX(10px);
62. }
63. .nav-effect-2{
64. transform: rotateY(120deg) translateX(20px);
65. }
66. .nav-effect-3{
67. transform: rotateY(150deg) translateX(30px);
68. }
69. .nav-effect-4{
70. transform: rotateY(180deg) translateX(40px);
71. }
72. .nav-ul a+ul a:hover{
73. background-color: rgba(69,85, 82, 0.75);
74. }

查看demo：demo