关于mega弹出框的overlay效果

为什么80%的码农都做不了架构师？>>>   

mega比起百度网盘，功能上少了些，但是，总感觉可靠一些，页面也很精致。国内某些web app容易给人一种粗制滥造的感觉，可能山寨太多了。

这个弹出框给人很惊艳的感觉。

.fm-dialog-overlay, .fm-account-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1100;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(20,20,20,0.5)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    top: 0;
    left: 0;
}

.overlayed .main-blur-block {
    filter: blur(0.25em);
    -webkit-filter: blur(0.25em);
}
.main-blur-block {
    height: 100%;
}

整体结构是模糊层main-blur-block在最外，然后渐变色层fm-dialog-overlay，最后是对话框fm-dialog-overlay。非常美的滤镜效果。

自己实践了一下，因为popup并没有和其他内容分开，所以blur不好加，只能用$("section:not(.pop)")来选中不是对话框的标签并添加class。

.blur-block{
    filter: blur(1px) grayscale(30%);
    -webkit-filter: blur(1px) grayscale(30%);
}
.blur-block {
    height: 100%;
}

转载于:https://my.oschina.net/sikou/blog/779826