濾鏡(Filters)是CSS3裏新增的一種神奇的功能。說起濾鏡(filter)效果,經常使用PhotoShop的人應該非常清楚,每張用Photoshop製作出來的圖片幾乎都使用了濾鏡進行美化。而CSS濾鏡,不需要你使用任何做圖軟件,用純CSS就會生成多種的濾鏡效果,比如模糊效果,透明效果,色彩反差調整,色彩反相等等;不僅能對圖片進行濾鏡處理,而且對任何網頁元素、甚至視頻都可以處理。下面讓我們來看看CSS濾鏡是如何使用的,看看我們如何用簡單的代碼創造出漂亮的濾鏡效果!
有很多的CSS濾鏡(filter)效果可以使用:grayscale(灰度級)
, blur(模糊)
,sepia(懷舊老照片效果)
, saturate(色彩飽和度)
, opacity(透明度)
,brightness(亮度)
, contrast(對比度)
, hue-rotate(色調)
,
和 invert(反相)
。這些CSS屬性的屬性值基本上都是0到1之間的數值,但有幾個例外,blur
屬性值以像素爲單位,可以是任何整數。而hue-rotate
濾鏡值以”deg”單位,度數。
下面是blur
濾鏡的用法例子:
.myElement {
filter: blur(2px);
}
可以同時使用多個濾鏡,之間用空格分開,所以,我們可以往裏面增加grayscale
和opacity
濾鏡效果:
.myElement {
filter: blur(2px) grayscale (.5) opacity(0.8);
}
對hue-rotate
濾鏡的使用也是一樣的:
.myElement {
filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}
如果靜態濾鏡效果還不能讓你滿意,你可以使用@keyframes
來生成動畫效果的CSS濾鏡:
@keyframes testAnim {
0% {
filter: grayscale(0.5) blur(1px) saturate(2);
}
100% {
filter: grayscale(0.2) blur(6px) saturate(9);
}
}
/* 圖片將呈現動畫效果的濾鏡處理過程 */
#animatePhoto {}
#animatePhoto:hover {
animation-name: testAnim;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0s;
}
如果大量是使用濾鏡,可能會對頁面的性能產生影響;所以經常測試你的網站永遠都沒有壞處。
效果演示
目前只有谷歌瀏覽器完全實現了CSS濾鏡功能,火狐瀏覽器和IE瀏覽器目前都看不到效果
圖片濾鏡特效試驗
黑白照片(灰度級)效果(grayscale:1)
模糊效果(blur:4px)
老照片(褐黃色)效果(sepia:1)
飽和度調整(saturate:0)
透明度調整(opacity:0.9)
亮度調整(brightness:1)
對比度調整(contrast:1)
色調調整(hue-rotate:0deg)
色彩反相(invert:0)
鼠標懸停控制動畫
基本頁面元素濾鏡效果 – 2px blur
龍王辭別,出長安,回水府。大小水神接着,問曰:“大王訪那賣卦的如何?”龍王道:“有,有,有!但是一個掉嘴口討春的先生。我問他幾時下雨,他就說明日下雨;問他什麼時辰,什麼雨數,他就說辰時布雲,巳時發雷,午時下雨,未時雨足,得水三尺三寸零四十八點,我與他打了個賭賽;若果如他言,送他謝金五十兩;如略差些,就打破他門面,趕他起身,不許在長安惑衆。”衆水族笑曰:“大王是八河都總管,司雨大龍神,有雨無雨,惟大王知之,他怎敢這等胡言?那賣卦的定是輸了,定是輸了!”主
視頻濾鏡效果
你甚至可以用CSS對視頻進行濾鏡處理。
CSS3裏的濾鏡給我們提供了更高級的對web圖片、視頻和網頁元素進行個性化的方法。相信在不久的將來CSS濾鏡(filter)很快就會在大大小小的網站上流行起來。