濾鏡(Filters)是CSS3里新增的一種神奇的功能。說(shuō)起濾鏡(filter)效果，經(jīng)常使用PhotoShop的人應(yīng)該非常清楚，每張用Photoshop制作出來(lái)的圖片幾乎都使用了濾鏡進(jìn)行美化。而CSS濾鏡，不需要你使用任何做圖軟件，用純CSS就會(huì)生成多種的濾鏡效果，比如模糊效果，透明效果，色彩反差調(diào)整，色彩反相等等；不僅能對(duì)圖片進(jìn)行濾鏡處理，而且對(duì)任何網(wǎng)頁(yè)元素、甚至視頻都可以處理。下面讓我們來(lái)看看CSS濾鏡是如何使用的，看看我們?nèi)绾斡煤?jiǎn)單的代碼創(chuàng)造出漂亮的濾鏡效果！

有很多的CSS濾鏡(filter)效果可以使用：grayscale(灰度級(jí)), blur(模糊), sepia(懷舊老照片效果), saturate(色彩飽和度), opacity(透明度), brightness(亮度), contrast(對(duì)比度), hue-rotate(色調(diào)), 和 invert(反相)。這些CSS屬性的屬性值基本上都是0到1之間的數(shù)值，但有幾個(gè)例外，blur屬性值以像素為單位，可以是任何整數(shù)。而hue-rotate濾鏡值以”deg”單位，度數(shù)。

下面是blur濾鏡的用法例子：

.myElement {filter: blur(2px); }

可以同時(shí)使用多個(gè)濾鏡，之間用空格分開，所以，我們可以往里面增加grayscale和opacity濾鏡效果：

.myElement {filter: blur(2px) grayscale (.5) opacity(0.8); }

對(duì)hue-rotate濾鏡的使用也是一樣的：

.myElement {filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg); }

如果靜態(tài)濾鏡效果還不能讓你滿意，你可以使用@keyframes來(lái)生成動(dòng)畫效果的CSS濾鏡：

@keyframes testAnim {0% {filter: grayscale(0.5) blur(1px) saturate(2);}100% {filter: grayscale(0.2) blur(6px) saturate(9);} }/* 圖片將呈現(xiàn)動(dòng)畫效果的濾鏡處理過(guò)程 */ #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; }

如果大量是使用濾鏡，可能會(huì)對(duì)頁(yè)面的性能產(chǎn)生影響；所以經(jīng)常測(cè)試你的網(wǎng)站永遠(yuǎn)都沒(méi)有壞處。

效果演示

目前只有谷歌瀏覽器完全實(shí)現(xiàn)了CSS濾鏡功能，火狐瀏覽器和IE瀏覽器目前都看不到效果

總結(jié)

以上是生活随笔為你收集整理的CSS滤镜(Filters)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。