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;

}

}

總結

以上是生活随笔為你收集整理的动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。