动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效

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;

}

}