Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件。您通过简单的配置，既可以生成非常炫酷的半透明模糊的毛玻璃效果。
使用方法
在HTML文件中引入。
HTML结构
创建HTML结构并使用下面的属性来配置毛玻璃效果。
ALL PANEL CONTENT GOES HERE
panel-dimensions：宽度和高度。
breakpoint-type：min-width 或 max-width。
breakpoints：响应式断点。
stdDeviation：模糊的数量。
content-margin：为面板添加一个margin。
CSS
看一个小例子，下面的HTML通过初始化之后，相对于生成后面的CSS样式。
panel-dimensions="auto auto"
breakpoint-type="min-width"
breakpoints="600px 70% 300px, 1200px 60% 500px">
.frosted-panel {
width: auto;
height: auto;
}
@media only screen and (min-width: 600px) {
.frosted-panel {
width: 70%;
height: 300px;
}
}
@media only screen and (min-width: 1200px) {
.frosted-panel {
width: 60%;
height: 500px;
}
}
/* When breakpoint-type is changed from min-width to max-width, the CSS equivalent would now be this:*/
.frosted-panel {
width: auto;
height: auto;
}
@media only screen and (max-width: 1200px) {
.frosted-panel {
width: 60%;
height: 500px;
}
}
@media only screen and (max-width: 600px) {
.frosted-panel {
width: 70%;
height: 300px;
}
}
