CSS濾鏡wave屬性(波形濾鏡)

2012/11/25 21:58:42作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

CSS濾鏡wave屬性(波形濾鏡)

wave濾鏡用來(lái)把對(duì)象按照垂直的波紋樣式打亂。waVe的表達(dá)式還是比較復(fù)雜的，它一共有5個(gè)參數(shù)。

【基本語(yǔ)法】

filter：wave(add=參數(shù)值，freq=參數(shù)值，lightstrength=參數(shù)值，phase=參數(shù)值，strength=參數(shù)值)；

【語(yǔ)法介紹】

add：用于設(shè)置是否要把對(duì)象按照波形樣式打亂。
freq：指生成波紋的頻率，也就是指定在對(duì)象上共需要產(chǎn)生多少個(gè)完整的波紋。
lightstrength：為了使生成的波紋增強(qiáng)光的效果，參數(shù)值可以從0到100。
phase：用來(lái)設(shè)置正弦波開始的偏移量。它的可變范圍為從0到1 00。
strength：用于設(shè)置波浪的強(qiáng)度大小。

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<style type="text/css">
.p { filter: Wave(Add=true, Freq=2, LightStrength=20, Phase=50, Strength=40);}
</style>
</head>
<body>
<table width="330" height="202" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td align="center" >原圖</td>
    <td align="center" >Wave濾鏡</td>
  </tr>
  <tr>
<td width="150" height="187" ><img src="9.jpg" width="294" height="422"
 /></td>
<td width="150" ><img src="9.jpg" width="294" height="422" class="p" 
/></td>
  </tr>
</table>
</body>
</html>

【代碼分析】

在代碼中，filter：wave(add=true，freq=2，lightstrength=20，phase=50，strength=40)標(biāo)簽用來(lái)設(shè)置波紋扭曲效果，在瀏覽器中預(yù)覽效果，如圖所示。

波形濾鏡wave運(yùn)行效果
【素材及源碼下載】