这是一款使用纯CSS3 制作 的单页切换导航菜单界面设计效果。该页面效果中，在页面的左侧垂直排放一组导航按钮，当点击导航按钮时，相应的页面会从屏幕右侧滑动出来，效果非常炫酷。
&nbs p; 使用方法
HT ML 结构
该单页切换导航菜单界面的HTML结构如下：
XM L/HTML Code 复制内容到剪贴板
< div class = "ct" id = "t1" > < div class = "ct" id = "t2" > < div class = "ct" id = "t3" > < div class = "ct" id = "t4" > < div class = "ct" id = "t5" > < ul id = " ;m enu" > < a hr ef = " # t1" > < li class = "icon fa fa-bolt" id = "uno" > </ li > </ a > < a href = "#t2" > < li class = "icon fa fa-keyboard-o" id = " DOS " > </ li > </ a > < a href = "#t3" > < li class = "icon fa fa-rocket" id = "tres" > </ li > </ a > < a href = "#t4" > < li class = "icon fa fa-dribbble" id = "cuatro" > </ li > </ a > < a href = "#t5" > < li class = "icon fa fa-plus-circle" id = "cinco" > </ li > </ a > </ ul > < div class = "page" id = "p1" > < section class = "icon fa fa-bolt" > < span class = "t IT le" > Bolt </ span > < span class = "hint" > .. . </ section > </ div > < div class = "page" id = "p2" > < section class = "icon fa fa-keyboard-o" > < span class = "title" > Ty PE </ span > </ section > </ div > < div class = "page" id = " P3 " > < section class = "icon fa fa-rocket" > < span class = "title" > Rocket </ span > </ section > </ div > < div class = "page" id = "p4" > < section class = "icon fa fa-dribbble" > < span class = "title" > Dribbble </ span > < p class = "hint" > Im ready to play , < span class = "hint line -t rough" > invite me </ span > find me </ p > < p class = "hint" > ... </ p > </ section > </ div > < div class = "page" id = "p5" > < section class = "icon fa fa-plus-circle" > < span class = "title" > More </ span > < p class = "hint" > ... </ p > </ section > </ div > </ div > </ div > </ div > </ div > </ div >
CSS样式
该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:t arg et伪元素来完成 按钮点击 时的页面切换。完整的CSS代码如下，代码中没有添加浏览器厂商的前缀。
CSS Code 复制内容到剪贴板
html, body, . page { width : 100%; h ei ght : 100%; mar gin : 0; padding : 0; transition: all .6s c ub ic-bezier(.5, .2, .2, 1.1); color : #fff ; overflow : hidden ; } * { font-f ami ly : 'open sans' , 'lato' , 'helvetica' , sans -s erif ; } . 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 ; } #t 2: target #p2, #t 3: target #p3, #t 4: target #p4, #t 5: target #p5 { transform: trans latex (-190%); transition-delay: .4s ! important ; } #t 2: target #p1, #t 3: target #p1, #t 4: target #p1, #t 5: target #p1{ background : black ; } #t 2: target #p1 . icon , #t 3: target #p1 . icon , #t 4: target #p1 . icon , #t 5: 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; } #t 2: target ul . icon , #t 3: target ul . icon , #t 4: target ul . icon , #t 5: target ul . icon { transform: scale(.6); transition-delay: .25s; } #t 2: target #dos , #t 3: target #tres , #t 4: target #cuatro , #t 4: target #cinco { transform: scale(1.2) ! important ; } ul { position : fixed ; z -i ndex : 1; top : 0; bottom bottom : 0; left : 0; margin : auto ; height : 280px ; width : 10%; padding : 0; text-align : center ; } #menu . icon { margin : 30px 0; transition: all .5s ease-out ! important ; } a { text-decoration : none ; } .title, .hint { display : block ; } .title { font-size : 38px ; } .hint { font-size : 13px ; } #p4 .hint { display : inherit ! important ; } .hint a { color : yellow ; transition: all 250ms ease-out; } .hint a:hover { color : #FFF ; } .line-trough { text-decoration : line-through ; } . page . icon { position : absolute ; top : 0; bottom bottom : 0; right right : 10%; left : 0; width : 270px ; height : 170px ; margin : auto ; text-align : center ; font-size : 80px ; line-height : 1.3; transform: translateX( 360 %); transition: all .5s cubic-bezier(.25, 1, .5, 1.25); } . page #p1 . icon { height : 220px ; } . page #p1 . icon { transform: translateX(10%) ! important ; } #t 2: target . page #p2 . icon , #t 3: target . page #p3 . icon , #t 4: target . page #p4 . icon , #t 5: target . page #p5 . icon { transform: translateX(0) ! important ; transition-delay: 1s; }
以上这篇纯CSS3单页切换导航菜单界面设计的 简单 实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
总结
以上是 为你收集整理的 纯CSS3单页切换导航菜单界面设计的简单实现 全部内容，希望文章能够帮你解决 纯CSS3单页切换导航菜单界面设计的简单实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于纯CSS3单页切换导航菜单界面设计的简单实现的详细内容...