css濾鏡效果（二）_基礎(chǔ)教程

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:54:57

css濾鏡效果（二）_基礎(chǔ)教程

css濾鏡效果（二）_基礎(chǔ)教程:7、Gray ,Invert,Xray 濾鏡語(yǔ)法：{filter:gray} ,{filter:invert},{filter:xray} Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對(duì)象反映出它的輪廓并把這些輪廓加亮，也就是所謂

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀css濾鏡效果（二）_基礎(chǔ)教程:7、Gray ,Invert,Xray 濾鏡語(yǔ)法：{filter:gray} ,{filter:invert},{filter:xray} Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對(duì)象反映出它的輪廓并把這些輪廓加亮，也就是所謂

7、Gray ,Invert,Xray 濾鏡

語(yǔ)法：{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對(duì)象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。

效果如下：

8、Light 濾鏡

語(yǔ)法：Filter{light}

這個(gè)屬性模擬光源的投射效果。一旦為對(duì)象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它的“方法(Method)"來(lái)設(shè)置或者改變屬性?！癓IGHT"可用的方法有：

AddAmbient 加入包圍的光源

AddCone 加入錐形光源

AddPoint 加入點(diǎn)光源

Changcolor 改變光的顏色

Changstrength 改變光源的強(qiáng)度

Clear 清除所有的光源

MoveLight 移動(dòng)光源

可以定義光源的虛擬位置，以及通過(guò)調(diào)整X軸和Y軸的數(shù)值來(lái)控制光源焦點(diǎn)的位置，還可以調(diào)整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動(dòng)態(tài)的設(shè)置光源，可能回產(chǎn)生一些意想不到的效果。后面幾頁(yè)會(huì)有具體范例。

9、Mask 濾鏡

語(yǔ)法：{filter:mask(color=color)}

使用"MASK"屬性可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。

10、Shadow 濾鏡

語(yǔ)法：{filter:shadow(color=color,direction=direction)}

利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度。

filter:shadow(color=red,direction=225)
filter:shadow(color=blue,direction=225)
filter:shadow(color=gray,direction=225)
效果分別如下：

Shadow 濾鏡滴水檐茶坊制作 Shadow 濾鏡滴水檐茶坊制作 Shadow 濾鏡滴水檐茶坊制作 11、Wave 濾鏡語(yǔ)法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 屬性把對(duì)象按垂直的波形樣式打亂。默認(rèn)是“TRUE（非0）”，

“ADD”表示是否要把對(duì)象按照波形樣式打亂，

“FREQ”是波紋的頻率，也就是指定在對(duì)象上一共需要產(chǎn)生多少個(gè)完整的波紋，

“LIGHTSTRENGTH”參數(shù)可以對(duì)于波紋增強(qiáng)光影的效果，范圍0----100，

“PHASE”參數(shù)用來(lái)設(shè)置正弦波的偏移量。

“STRENGTH”代表振幅大小。