css濾鏡效果(二)_基礎教程

來源:互聯網
上載者:User
7、Gray ,Invert,Xray 濾鏡

文法:{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰階圖;Invert濾鏡是把對象的可視化屬性全部翻轉,包括色彩、飽和度、和亮度值;Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮,也就是所謂的“X”光片。

效果如下:

8、Light 濾鏡

文法:Filter{light}

這個屬性類比光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那麼就可以調用它的“方法(Method)"來設定或者改變屬性。“LIGHT"可用的方法有:

  • AddAmbient 加入包圍的光源
  • AddCone 加入錐形光源
  • AddPoint 加入點光源
  • Changcolor 改變光的顏色
  • Changstrength 改變光源的強度
  • Clear 清除所有的光源
  • MoveLight 移動光源

可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態設定光源,可能回產生一些意想不到的效果。後面幾頁會有具體範例。

9、Mask 濾鏡

文法:{filter:mask(color=color)}

使用"MASK"屬性可以為對象建立一個覆蓋於表面的膜,其效果就象戴者有色眼鏡看物體一樣。

10、Shadow 濾鏡

文法:{filter:shadow(color=color,direction=direction)}

利用“Shadow”屬性可以在指定的方向建立物體的投影,COLOR是投影色,DIRECTION是設定投影的方向。其中0度代表垂直向上,然後每45度為一個單位。它的預設值是向左的270度。

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

Shadow 濾鏡 滴水簷茶坊製作 Shadow 濾鏡 滴水簷茶坊製作 Shadow 濾鏡 滴水簷茶坊製作 11、Wave 濾鏡 文法:{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 屬性把對象按垂直的波形樣式打亂。預設是“TRUE(非0)”,

“ADD”表示是否要把對象按照波形樣式打亂,

“FREQ”是波紋的頻率,也就是指定在對象上一共需要產生多少個完整的波紋,

“LIGHTSTRENGTH”參數可以對于波紋增強光影的效果,範圍0----100,

“PHASE”參數用來設定正弦波的位移量。

“STRENGTH”代表振幅大小。

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.