CSS3的一个简单导航栏如何实现

互联网
从今天起，做一个简单的人，踏实务实。不沉溺幻想。不庸人自扰。要快乐，要开朗，要坚韧，要温暖，对人要真诚。要诚恳，要坦然，要慷慨，要宽容，要有平常心。

上面是一个效果图，代码在下面：

html

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

css:

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0auto;
  3. }
  4. body{
  5. background-color:#EEEEEE;
  6. font-family:MicrosoftYahei,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-ula{
  23. text-decoration:none;
  24. color:#FFF;
  25. display:inline-block;
  26. padding:10px20px;
  27. }
  28. .nav-ula:hover{
  29. background-color:#1ABC9C;
  30. }
  31. .nav-ula:hover+ulli{
  32. opacity:1;
  33. -webkit-transform:rotateY(0deg);
  34. transform:rotateY(0deg);
  35. }
  36. .nav-ula+ul{
  37. list-style:none;
  38. position:absolute;
  39. transition:opacity0.5s;
  40. -webkit-perspective:800;
  41. -webkit-transform-style:preserve-3d;
  42. }
  43. .nav-ula+ul:hoverli{
  44. opacity:1;
  45. -webkit-transform:rotateY(0deg);
  46. transform:rotateY(0deg);
  47. }
  48. .nav-ula+ulli{
  49. position:relative;
  50. left:-40px;
  51. opacity:0;
  52. width:150px;
  53. transition:transform1.5s,opacity0.8s;
  54. }
  55. .nav-ula+ula{
  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-ula+ula:hover{
  73. background-color:rgba(69,85,82,0.75);
  74. }

查看demo：demo

本文CSS3的一个简单导航栏如何实现到此结束。大多数人想要改造这个世界，但却罕有人想改造自我。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例