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%;
}