FrostedPanel是一款使用js编写的炫酷毛玻璃特效插件。您通过简单的配置，既可以生成非常炫酷的半透明模糊的毛玻璃效果。
使用方法
在HTML文件中引入。
<scripttype="text/javascript"src="path/to/app.js"></script>
HTML结构
创建HTML结构并使用下面的属性来配置毛玻璃效果。
<divclass="frosted-panel"panel-dimensions="80%60%"breakpoint-type="min-width"breakpoints="600px80%80%,1200px60%500px">
<svg>
<filterid="blurMe"filterRes="1200"color-interpolation-filters="sRGB">
<feGaussianBlurin="SourceGraphic"stdDeviation="7"/>
</filter>
<imagexlink:href="bg.jpg"x="0"y="0"width="2880"height="1620"filter="url(#blurMe)"/>
</svg>
<divclass="content"content-margin="5px">
ALLPANELCONTENTGOESHERE
</div>
</div>
panel-dimensions：宽度和高度。
breakpoint-type：min-width或max-width。
breakpoints：响应式断点。
stdDeviation：模糊的数量。
content-margin：为面板添加一个margin。
CSS
看一个小例子，下面的HTML通过初始化之后，相对于生成后面的CSS样式。
<divclass="frosted-panel"
panel-dimensions="autoauto"
breakpoint-type="min-width"
breakpoints="600px70%300px,1200px60%500px">
.frosted-panel{
width:auto;
height:auto;
}
@mediaonlyscreenand(min-width:600px){
.frosted-panel{
width:70%;
height:300px;
}
}
@mediaonlyscreenand(min-width:1200px){
.frosted-panel{
width:60%;
height:500px;
}
}
/*Whenbreakpoint-typeischangedfrommin-widthtomax-width,theCSSequivalentwouldnowbethis:*/
.frosted-panel{
width:auto;
height:auto;
}
@mediaonlyscreenand(max-width:1200px){
.frosted-panel{
width:60%;
height:500px;
}
}
@mediaonlyscreenand(max-width:600px){
.frosted-panel{
width:70%;
height:300px;
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery