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

这是一个单页面切换导航菜单界面的设计效果，与纯CSS3制作的。这一页，在竖放一组导航按钮在页面左侧点击导航按钮，相应的页面会从屏幕右侧滑出，效果很酷。
使用方法

HTML结构

单页开关导航菜单界面的HTML结构如下所示：

xml代码将内容复制到剪贴板。

螺栓…
型
火箭
Dribbble

我准备玩了，邀请我找到我

…

更多

…

css样式

单页切换导航菜单界面使用转换和转换来实现页面切换动画效果。并通过：目标伪元素完成按钮点击页面切换。完整的CSS代码如下所示。代码中没有添加到浏览器供应商的前缀。

CSS代码将内容复制到剪贴板。
HTML，正文，页{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
过渡：all.6s立方贝塞尔（。5，。2，。2，1.1）；
颜色：# FFF；
溢出：隐藏；
}

{ *
字体：‘无'，'lato '，'helvetica，sans serif；
}

{。页
位置：绝对；
}

{ # P1
左：0；
}

# P2，P3 #，# P4，P5 { #
左：200%；
}

# P1 {背景：暗灰蓝色；}
# P2 {背景：番茄；}
# P3 {背景：LD；}
# P4 {背景：深粉色；}
# P5 {背景：# 9b59b6；}

# T2：目标# P2，
# T3：目标# P3，
# T4：目标# P4，
# T5：目标{ # P5
translatex变换：（190%）；
转换延迟！重要；
}

# T2：目标# P1，
# T3：目标# P1，
# T4：目标# P1，
# T5：目标# P1 {
背景：黑色；
}

# T2：目标# p1.icon，
# T3：目标# p1.icon，
# T4：目标# p1.icon，
# T5：目标# p1.icon {
WebKit的滤波器：模糊（3px）；
滤波器：模糊（3px）；
}

{。图标
颜色：# FFF；
字体大小：32px；
显示块；
}

图标：悬停{
不透明性：0.5；
}

page.icon.title {。
线高度：2；
}

# T2：目标图标UL，
# T3目标图标：UL认证，
# T4：目标图标UL，
# T5：UL图标{目标。
转换：缩放（6）；
过渡：25s延迟；
}

# T2：目标# DOS，
# T3：目标#特雷斯，
# T4：目标#四，
# T4：目标{ #五
转换：规模（1.2）！重要；
}

{ UL
位置：固定；
Z指数：1；
顶部：0；
bottombottom：0；
左：0；
保证金：汽车；
身高：280px；
宽度：10%；
填充：0；
文本对齐：中心；
}

# menu.icon {
30px保证金：0；
过渡：all.5s自在！重要；
}

{
文字装饰：无；
}

标题，提示{
显示块；
}

{名称。
字体大小：38px；
}

{。提示
字体大小：13px；
}

# p4.hint {
显示：继承！重要；
}

提示{
颜色：黄色；
过渡：所有的250ms自在；
}

提示{悬停
颜色：# FFF；
}

{线槽
文字装饰：线条贯穿；
}

page.icon {。
位置：绝对；
顶部：0；
bottombottom：0；
错误：10%；
左：0；
宽度：270px；
身高：170px；
保证金：汽车；
文本对齐：中心；
字体大小：80px；
线高度：1.3；
translatex变换：（360%）；
过渡：all.5s立方贝塞尔（。25, 1，5，1.25）；
}

网页# p1.icon {。
身高：220px；
}

网页# p1.icon {。
translatex变换：（10%）！重要；
}

# T2：目标网页p2.icon #，
# T3：目标网页p3.icon #，
# T4：目标网页p4.icon #，
# T5：目标页面# p5.icon {
translatex变换：（0）！重要；
转换延迟：1秒；
}

这个简单的纯CSS3实现单页面切换导航菜单界面的设计都是萧边分享你的内容。我希望能给你一个参考，我希望你会得到很多支持。