CSS3 之filter毛玻璃效果彈窗

同步發布：

css3 的 filter 非常強大，在實際開發中也能提公升逼格，比如filter: blur可以實現更優雅的彈窗遮罩。

先看效果：

效果主要用css3的濾鏡屬性實現，**如下：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
>
5<
meta 
charset
="utf-8"
>
6<
title
>css3毛玻璃效果
title
>
7<
style
>
8body.on .filter-blur 
13body.on .mask 
16img 
19.mask 
29.mask .pop 
42style
>
43head
>
44<
body 
class
="">
45<
div 
class
="filter-blur"
>
46<
input 
type
="button"
value
="顯示彈窗"
id="js_btn"
>
47<
p><
img 
src=""
alt=""
>
p>
48<
p>測試文字
p>
49<
p>測試文字
p>
50<
p>測試文字
p>
51<
p>測試文字
p>
52div
>
53<
div 
class
="mask"
id="js_mask"
>
54<
div 
class
="pop"
id="js_pop"
>彈出框內容
div>
55div
>
56<
script
>
57//
繫結彈窗事件
58document.getelementbyid(
"js_btn
").addeventlistener(
'click', 
function
(), 
false
);61
//點選遮罩隱藏彈窗
62document.getelementbyid(
"js_mask
").addeventlistener(
'click', 
function
(), 
false
);65
//點選彈窗阻止事件冒泡
66document.getelementbyid(
"js_pop
").addeventlistener(
'click', 
function
(e), 
false
);69
script
>
70body
>
71html
>

css毛玻璃效果白邊 css3毛玻璃效果白邊問題

1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...

css3毛玻璃模糊效果

css3 blur濾鏡實現 如下測試 需要注意目前火狐不支援，其他些瀏覽器，如firefox到目前還沒有支援css3 filter.當然，要實現 比方說 firefox 24瀏覽器上 變模糊的效果，也是可以的。可以使用svg的模糊濾鏡。新建文命名為blur.svg的svg檔案 xml version...

利用CSS3實現毛玻璃效果示例原始碼

先來看看效果圖 複製 如下 body main 去掉那些式樣方面的 上面實現毛玻璃效果的核心 如下 複製 如下 body main 當然這個效果離我們的期望還有點距離，因為單純的30 的透明度會讓文字變的難以閱讀。對頁面來說背景圖只是起美化作用，文字才是最核心的。你可以增大透明度的百分比，但這樣頁面...