今天小编跟大家讲解下有关纯CSS3单页切换导航菜单界面设计的简单实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3单页切换导航菜单界面设计的简单实现 的相关资料，希望小伙伴们看了有所帮助。
这是一款使用纯CSS3制作的单页切换导航菜单界面设计效果。该页面效果中，在页面的左侧垂直排放一组导航按钮，当点击导航按钮时，相应的页面会从屏幕右侧滑动出来，效果非常炫酷。
使用方法
HTML结构
该单页切换导航菜单界面的HTML结构如下：
XML/HTML Code复制内容到剪贴板 <divclass="ct"id="t1"> <divclass="ct"id="t2"> <divclass="ct"id="t3"> <divclass="ct"id="t4"> <divclass="ct"id="t5"> <ulid="menu"> <ahref="#t1"><liclass="iconfafa-bolt"id="uno"></li></a> <ahref="#t2"><liclass="iconfafa-keyboard-o"id="dos"></li></a> <ahref="#t3"><liclass="iconfafa-rocket"id="tres"></li></a> <ahref="#t4"><liclass="iconfafa-dribbble"id="cuatro"></li></a> <ahref="#t5"><liclass="iconfafa-plus-circle"id="cinco"></li></a> </ul> <divclass="page"id="p1"> <sectionclass="iconfafa-bolt"><spanclass="title">Bolt</span><spanclass="hint">...</section> </div> <divclass="page"id="p2"> <sectionclass="iconfafa-keyboard-o"><spanclass="title">Type</span></section> </div> <divclass="page"id="p3"> <sectionclass="iconfafa-rocket"><spanclass="title">Rocket</span></section> </div> <divclass="page"id="p4"> <sectionclass="iconfafa-dribbble"> <spanclass="title">Dribbble</span> <pclass="hint"> Imreadytoplay,<spanclass="hintline-trough">inviteme</span>findme </p> <pclass="hint">...</p> </section> </div> <divclass="page"id="p5"> <sectionclass="iconfafa-plus-circle"> <spanclass="title">More</span> <pclass="hint"> ... </p> </section> </div> </div> </div> </div> </div> </div>CSS样式
该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:target伪元素来完成按钮点击时的页面切换。完整的CSS代码如下，代码中没有添加浏览器厂商的前缀。
CSS Code复制内容到剪贴板 html,body,.page{ width:100%; height:100%; margin:0; padding:0; transition:all.6scubic-bezier(.5,.2,.2,1.1); color:#fff; overflow:hidden; } *{ font-family:'opensans','lato','helvetica',sans-serif; } .page{ position:absolute; } #p1{ left:0; } #p2,#p3,#p4,#p5{ left:200%; } #p1{background:darkslateblue;} #p2{background:tomato;} #p3{background:gold;} #p4{background:deeppink;} #p5{background:#9b59b6;} #t2:target#p2, #t3:target#p3, #t4:target#p4, #t5:target#p5{ transform:translateX(-190%); transition-delay:.4s!important; } #t2:target#p1, #t3:target#p1, #t4:target#p1, #t5:target#p1{ background:black; } #t2:target#p1.icon, #t3:target#p1.icon, #t4:target#p1.icon, #t5:target#p1.icon{ -webkit-filter:blur(3px); filter:blur(3px); } .icon{ color:#fff; font-size:32px; display:block; } ul.icon:hover{ opacity:0.5; } .page.icon.title{ line-height:2; } #t2:targetul.icon, #t3:targetul.icon, #t4:targetul.icon, #t5:targetul.icon{ transform:scale(.6); transition-delay:.25s; } #t2:target#dos, #t3:target#tres, #t4:target#cuatro, #t4:target#cinco{ transform:scale(1.2)!important; } ul{ position:fixed; z-index:1; top:0; bottombottom:0; left:0; margin:auto; height:280px; width:10%; padding:0; text-align:center; } #menu.icon{ margin:30px0; transition:all.5sease-out!important; } a{ text-decoration:none; } .title,.hint{ display:block; } .title{ font-size:38px; } .hint{ font-size:13px; } #p4.hint{ display:inherit!important; } .hinta{ color:yellow; transition:all250msease-out; } .hinta:hover{ color:#FFF; } .line-trough{ text-decoration:line-through; } .page.icon{ position:absolute; top:0; bottombottom:0; rightright:10%; left:0; width:270px; height:170px; margin:auto; text-align:center; font-size:80px; line-height:1.3; transform:translateX(360%); transition:all.5scubic-bezier(.25,1,.5,1.25); } .page#p1.icon{ height:220px; } .page#p1.icon{ transform:translateX(10%)!important; } #t2:target.page#p2.icon, #t3:target.page#p3.icon, #t4:target.page#p4.icon, #t5:target.page#p5.icon{ transform:translateX(0)!important; transition-delay:1s; }以上这篇纯CSS3单页切换导航菜单界面设计的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持爱蒂网。
来源：爱蒂网
