使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
我要評(píng)論今天在使用icloud的時(shí)候看到蘋(píng)果icloud官網(wǎng)的毛玻璃效果非常贊，仔細(xì)研究了一下它的實(shí)現(xiàn)方式，是使用js配合background-image: -webkit-canvas的形式繪制出的毛玻璃背景圖片。
不過(guò)今天又仔細(xì)研究了一下css3中的blur方法，可以實(shí)現(xiàn)同樣的效果。且配合JS可以實(shí)現(xiàn)模糊縮放的效果
基礎(chǔ)
先來(lái)看一下blur屬性的表達(dá)式：
- filter：blur（add=add，direction，strength=strength）
我們看到blur屬性有三個(gè)參數(shù)：add、direction、strength。
Add參數(shù)有兩個(gè)參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。
Direction參數(shù)用來(lái)設(shè)置模糊的方向。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對(duì)應(yīng)關(guān)系見(jiàn)下表：
實(shí)例
CSS代碼
- .blur {
- filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
- -webkit-filter: blur(10px); /* Chrome, Opera */
- -moz-filter: blur(10px);
- -ms-filter: blur(10px);
- filter: blur(10px);
- filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
- }
HTML部分
- <img src="mm1.jpg" class="blur" />
其中blur(10px)中的大小決定了模糊后的圖片大小和模糊程度
相關(guān)文章
詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用
這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友2020-08-24
通過(guò)css3的filter濾鏡改變png圖片的顏色的示例代碼
本方法是通過(guò)CSS3濾鏡 filter 中的 drop-shadow 將png圖片的非透明部分生成任意顏色的投影，然后將原始圖片隱藏起來(lái)，從而達(dá)到改變圖片顏色的目的，代碼簡(jiǎn)單易懂，對(duì)CSS改2020-05-06
這篇文章主要介紹了CSS3 中filter（濾鏡）屬性使用，本文通過(guò)實(shí)例代碼截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-07
jquery和CSS3圖片排序過(guò)濾搜索插件Filterizr
Filterizr是一個(gè)jquery和CSS3圖片排序過(guò)濾插件?？蓪?duì)一組圖片進(jìn)行排序，按條件過(guò)濾和按關(guān)鍵字搜索，歡迎下載2017-07-19
這篇文章主要介紹了詳解CSS3中強(qiáng)大的filter(濾鏡)屬性的相關(guān)資料,需要的朋友可以參考下2017-06-29使用Filters濾鏡彌補(bǔ)CSS3的跨瀏覽器問(wèn)題以及兼容低版本IE
跨瀏覽器兼容性是網(wǎng)頁(yè)制作永恒的難題,所以在未來(lái)一段時(shí)間里，樣式表里的-moz-，-webkit-，(-ms-,-o-)等等前綴將長(zhǎng)期存在,除了考慮各家瀏覽器之間的兼容性外，我們還有必要2013-01-23css3背景圖片透明疊加屬性cross-fade簡(jiǎn)介及用法實(shí)例
據(jù)說(shuō)iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性，一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來(lái)為您介紹cross-fade屬性，感興趣的朋友2013-01-08CSS3 濾鏡 webkit-filter詳細(xì)介紹及使用方法
CSS3 開(kāi)始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它,需2012-12-27CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁(yè)灰色或者黑色模式的代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁(yè)灰色或者黑色模式的代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以2020-11-30
