CSS3全屏遮罩效果导航菜单

这是一款使用 HTML5 svg 和 css3 制作的全屏遮罩效果导航菜单。这款全屏遮罩效果导航菜单共有 13 种不同的效果。有多种效果使用 HTML5 Snap.svg 完成，最酷的要数阿拉丁神灯效果。这个简要教程中将要和大家分享一些全屏遮罩效果样式的导航菜单。特别注意的一点是这些遮罩层没有固定的大小但是它们覆盖整个屏幕。第一个 demo 的灵感来自于 Huge。这个效果使遮罩层淡入淡出，并使里面的内容带有一些 3d 旋转效果：

.overlay-hugeinc {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}

.overlay-hugeinc nav {
perspective: 1200px;
}

.overlay-hugeinc nav ul {
opacity: 0.4;
transform: translateY(-25%) rotateX(35deg);
transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
opacity: 1;
transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
transform: translateY(25%) rotateX(-35deg);
}

这里使用一些视觉差小把戏使遮罩层消失：我们为可见元素设置 transition delay 使透明度首先开始改变。其他一些 demo 中我们使用了 Snap.svg 来制作 SVG 路径变形动画。下载链接

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴