纯CSS3单页切换导航菜单界面设计的简单如何实现

互联网
公园里的草真绿啊，绿得让你感觉那是一块绿地毯；公园里的草真密啊，密得看不见泥土；公园里的草真柔啊，微风一吹，它们就翩翩起舞。

这是一款使用纯CSS3制作的单页切换导航菜单界面设计效果。该页面效果中，在页面的左侧垂直排放一组导航按钮，当点击导航按钮时，相应的页面会从屏幕右侧滑动出来，效果非常炫酷。

使用方法

HTML结构

该单页切换导航菜单界面的HTML结构如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="ct"id="t1">
  2. <divclass="ct"id="t2">
  3. <divclass="ct"id="t3">
  4. <divclass="ct"id="t4">
  5. <divclass="ct"id="t5">
  6. <ulid="menu">
  7. <arel="nofollow noopener noreferrer" href="#t1"><liclass="iconfafa-bolt"id="uno"></li></a>
  8. <arel="nofollow noopener noreferrer" href="#t2"><liclass="iconfafa-keyboard-o"id="dos"></li></a>
  9. <arel="nofollow noopener noreferrer" href="#t3"><liclass="iconfafa-rocket"id="tres"></li></a>
  10. <arel="nofollow noopener noreferrer" href="#t4"><liclass="iconfafa-dribbble"id="cuatro"></li></a>
  11. <arel="nofollow noopener noreferrer" href="#t5"><liclass="iconfafa-plus-circle"id="cinco"></li></a>
  12. </ul>
  13. <divclass="page"id="p1">
  14. <sectionclass="iconfafa-bolt"><spanclass="title">Bolt</span><spanclass="hint">...</section>
  15. </div>
  16. <divclass="page"id="p2">
  17. <sectionclass="iconfafa-keyboard-o"><spanclass="title">Type</span></section>
  18. </div>
  19. <divclass="page"id="p3">
  20. <sectionclass="iconfafa-rocket"><spanclass="title">Rocket</span></section>
  21. </div>
  22. <divclass="page"id="p4">
  23. <sectionclass="iconfafa-dribbble">
  24. <spanclass="title">Dribbble</span>
  25. <pclass="hint">
  26. Imreadytoplay,<spanclass="hintline-trough">inviteme</span>findme
  27. </p>
  28. <pclass="hint">...</p>
  29. </section>
  30. </div>
  31. <divclass="page"id="p5">
  32. <sectionclass="iconfafa-plus-circle">
  33. <spanclass="title">More</span>
  34. <pclass="hint">
  35. ...
  36. </p>
  37. </section>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>

CSS样式

该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:target伪元素来完成按钮点击时的页面切换。完整的CSS代码如下，代码中没有添加浏览器厂商的前缀。

CSS Code复制内容到剪贴板
  1. html,body,.page{
  2. width:100%;
  3. height:100%;
  4. margin:0;
  5. padding:0;
  6. transition:all.6scubic-bezier(.5,.2,.2,1.1);
  7. color:#fff;
  8. overflow:hidden;
  9. }
  11. *{
  12. font-family:'opensans','lato','helvetica',sans-serif;
  13. }
  15. .page{
  16. position:absolute;
  17. }
  19. #p1{
  20. left:0;
  21. }
  23. #p2,#p3,#p4,#p5{
  24. left:200%;
  25. }
  27. #p1{background:darkslateblue;}
  28. #p2{background:tomato;}
  29. #p3{background:gold;}
  30. #p4{background:deeppink;}
  31. #p5{background:#9b59b6;}
  33. #t2:target#p2,
  34. #t3:target#p3,
  35. #t4:target#p4,
  36. #t5:target#p5{
  37. transform:translateX(-190%);
  38. transition-delay:.4s!important;
  39. }
  41. #t2:target#p1,
  42. #t3:target#p1,
  43. #t4:target#p1,
  44. #t5:target#p1{
  45. background:black;
  46. }
  48. #t2:target#p1.icon,
  49. #t3:target#p1.icon,
  50. #t4:target#p1.icon,
  51. #t5:target#p1.icon{
  52. -webkit-filter:blur(3px);
  53. filter:blur(3px);
  54. }
  56. .icon{
  57. color:#fff;
  58. font-size:32px;
  59. display:block;
  60. }
  62. ul.icon:hover{
  63. opacity:0.5;
  64. }
  66. .page.icon.title{
  67. line-height:2;
  68. }
  70. #t2:targetul.icon,
  71. #t3:targetul.icon,
  72. #t4:targetul.icon,
  73. #t5:targetul.icon{
  74. transform:scale(.6);
  75. transition-delay:.25s;
  76. }
  78. #t2:target#dos,
  79. #t3:target#tres,
  80. #t4:target#cuatro,
  81. #t4:target#cinco{
  82. transform:scale(1.2)!important;
  83. }
  85. ul{
  86. position:fixed;
  87. z-index:1;
  88. top:0;
  89. bottombottom:0;
  90. left:0;
  91. margin:auto;
  92. height:280px;
  93. width:10%;
  94. padding:0;
  95. text-align:center;
  96. }
  98. #menu.icon{
  99. margin:30px0;
  100. transition:all.5sease-out!important;
  101. }
  103. a{
  104. text-decoration:none;
  105. }
  107. .title,.hint{
  108. display:block;
  109. }
  111. .title{
  112. font-size:38px;
  113. }
  115. .hint{
  116. font-size:13px;
  117. }
  119. #p4.hint{
  120. display:inherit!important;
  121. }
  123. .hinta{
  124. color:yellow;
  125. transition:all250msease-out;
  126. }
  128. .hinta:hover{
  129. color:#FFF;
  130. }
  132. .line-trough{
  133. text-decoration:line-through;
  134. }
  136. .page.icon{
  137. position:absolute;
  138. top:0;
  139. bottombottom:0;
  140. rightright:10%;
  141. left:0;
  142. width:270px;
  143. height:170px;
  144. margin:auto;
  145. text-align:center;
  146. font-size:80px;
  147. line-height:1.3;
  148. transform:translateX(360%);
  149. transition:all.5scubic-bezier(.25,1,.5,1.25);
  150. }
  152. .page#p1.icon{
  153. height:220px;
  154. }
  156. .page#p1.icon{
  157. transform:translateX(10%)!important;
  158. }
  160. #t2:target.page#p2.icon,
  161. #t3:target.page#p3.icon,
  162. #t4:target.page#p4.icon,
  163. #t5:target.page#p5.icon{
  164. transform:translateX(0)!important;
  165. transition-delay:1s;
  166. }

以上这篇纯CSS3单页切换导航菜单界面设计的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

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