这是一款使用html5 svg和css3制作的全屏遮罩效果导航菜单。这个简要教程中将要和大家分享一些全屏遮罩效果样式的导航菜单。特别注意的一点是这些遮罩层没有固定的大小但是它们覆盖整个屏幕。

请在现代浏览器中查看这些demo。

第一个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路径变形动画。

在线预览    源码下载