牧月天涯(WWWFIND)整理各種濾鏡演示
本文一些例子借鑒天極網和MSDN
一些濾鏡單獨用于圖片時僅適用于透明的GIF
TransitionType: alpha blend 0:box in 1:box out 2:circle in 3:circle out 4:wipe up 5:wipe down 6:wipe right 7:wipe left 8:vertical blinds 9:horizontal blinds 10:checkerboard across 11:checkerboard down 12:dissolve 13:split-in vertical 14:split-out vertical 15:split-in horizontal 16:split-out horizontal 17:strips-down left 18:strips-up left 19:strips-down right 20:strips-up right 21:random horizontal bars 22:random vertical bars 23:random Duration:java script id=b_transition onclick="return b_transition_onclick()" type=button value=Transition name=button1>
累計效果
Alpha 濾鏡 opacity: finishopacity: style: 統一形狀 線形 放射形 矩形 startx: starty: finishx: finishy:
Shadow 濾鏡 color: Black Gray DarkGray LightGray White Aquamarine Blue Navy Purple DeepPink Violet Pink DarkGreen Green YellowGreen Yellow Orange Red Brown BurlyWood Beige direction:
Blur 濾鏡 add: 印象派模糊 普通 direction: strength(濃度): px
DropShadow濾鏡 color: Black Gray DarkGray LightGray White Aquamarine Blue Navy Purple DeepPink Violet Pink DarkGreen Green YellowGreen Yellow Orange Red Brown BurlyWood Beige offx: offy: positive(肯定的): 非透明像素建立可見的投影 透明的像素部分建立透明效果
Glow濾鏡 color: Black Gray DarkGray LightGray White Aquamarine Blue Navy Purple DeepPink Violet Pink DarkGreen Green YellowGreen Yellow Orange Red Brown BurlyWood Beige stength: chroma濾鏡 color: Black Gray DarkGray LightGray White Aquamarine Blue Navy Purple DeepPink Violet Pink DarkGreen Green YellowGreen Yellow Orange Red Brown BurlyWood Beige
Wave濾鏡 :add: 按照波形樣式打亂 不打亂 freq(頻率) lightstrength: phase: strength:
Mask濾鏡 color: Black Gray DarkGray LightGray White Aquamarine Blue Navy Purple DeepPink Violet Pink DarkGreen Green YellowGreen Yellow Orange Red Brown BurlyWood Beige Gray濾鏡 Invert濾鏡 Xray濾鏡 Fliph濾鏡 Flipv濾鏡
Alpha 濾鏡 "Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標,可以指定各種不同范圍的透明度。
clearcase /" target="_blank" >cccccc>
Alpha 濾鏡語法
{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity, style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)}
參數含義分別如下:
參數
說明
opacity
透明度。默認的范圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
finishopacity
是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
style
指定透明區域的形狀特征: 0 代表統一形狀 1 代表線形 2 代表放射狀 3 代表矩形
startx
漸變透明效果開始處的 X坐標。
starty
漸變透明效果開始處的 Y坐標。
finishx
漸變透明效果結束處的 X坐標。
finishy
漸變透明效果結束處的 Y坐標。
具體效果應用如下:
CSS濾鏡實現
代碼
正常圖片 <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif" width="180" height="120">
透明度為60 <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"style="filter:alpha(opacity=60)" width="180" height="120">
區域透明度設置,從(0,5)到(90,60) <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif" style="filter:alpha( opacity=0, finishopacity=100, style=1, startx=0,starty=5, finishx=90,finishy=60" width="180" height="120" >
Shadow 濾鏡
Shadow 濾鏡 語法
{filter:shadow(color=color,direction=direction)}
利用“Shadow”屬性可以在指定的方向建立物體的投影,COLOR是投影色,DIRECTION是設置投影的方向。其中0度代表垂直向上,然后每45度為一個單位。它的默認值是向左的270度。
效果如下:
CSS濾鏡實現
代碼
歡迎光臨
<td style=filter:shadow (color=red, direction=45) > <b>歡迎光臨</b></td>
Dragon
<td style=filter:shadow (color=blue,direction=180) > <b>Dragon</b></td>
設計在線
<td style=filter:shadow (color=gray, direction=225) > <b>設計在線</b></td>
Blur 濾鏡 用手指在一幅尚未干透的畫面迅速劃過時,畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。
Blur濾鏡 語法
HTML:{filter:blur(add=add,direction=direction, strength=strength)} Script語言: [oblurfilter=] object.filters.blur
參數含義分別如下:
參數
說明
add
它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的, 這是一個布爾值:ture (默認)或false
direction
該參數用來設置模糊的方向。 0度代表垂直向上,每45度為一個單位,默認值是向左的270度
strength
只能使用整數來指定,代表有多少像素的寬度將受到模糊影響,默認是5個像素。
字體設置效果:
CSS濾鏡實現
歡迎來到Dragon設計在線!
代碼
<tdstyle=filter:blur(add=ture,direction=135,strength=10)> <b><font size="+3">歡迎來到Dragon設計在線?。?font></b></td>
圖片設置效果:
CSS濾鏡實現
代碼
正常圖片 <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif" width="180" height="120">
<img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"style="filter:blur(strength=10)" width="180" height="120" >
<img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif" style="filter:blur(strength=70)" width="180" height="120">
DropShadow 濾鏡 “DropShaow",顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量,加上色彩。
DropShadow 濾鏡 語法
{filter:dropshadow (color=color,offx=ofx,offy=offy,positive=positive)}
參數含義如下:
參數
說明
Color
代表投射陰影的顏色
offx
X方向陰影的偏移量
offy
Y方向陰影的偏移量
Positive
布爾值 如果為TRUE(非0),就為任何的非透明像素建立可見的投影 如果為FASLE(0),就為透明的像素部分建立透明效果
效果實現:
CSS濾鏡實現
代碼
正常圖片
圖片效果 (這里我們把濾鏡代碼寫在<td>里) <td style=filter:dropshadow (color=gray, offx=5,offy=5.positive=0) > <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif" width="180" height="120"></td>
歡迎光臨Dragon設計在線
文字效果 <td style=filter:dropshadow (color=gray, offx=2,offy=2.positive=0) > <b><font size="+1"> 歡迎光臨Dragon設計在線 </font></b></td>
Glow 濾鏡 對一個對象使用"glow"屬性后,這個對象的邊緣就會產生類似發光的效果。
Glow 濾鏡 語法
{filter:glow(color=color,strength)}
參數含義如下:
參數
說明
Color
指定發光的顏色
STRENGTH
強度,值為1到255之間的任何整數,指定發光色力度和范圍。
實例:
CSS濾鏡實現
代碼
歡迎光臨Dragon設計在線
<td style="filter:glow (color=#ff0000,strength=2)" > <font size="+1"> <b>歡迎光臨Dragon設計在線</b></font> </td>
這樣的效果可以做標題
<td style=filter:glow (color=#ffff00,strength=5) > <b><font size="+1"> 這樣的效果可以做標題 </b></font> </td>
Mask 濾鏡
{filter:mask(color=color)}
使用"MASK"屬性可以為對象建立一個覆蓋于表面的膜,其效果就象戴著有色眼鏡看物體一樣 。
原表格拷屏
歡迎光臨Dragon設計在線
CSS 濾鏡效果實現
Light 濾鏡
這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那么就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有:
參數
說明
AddAmbient
加入包圍的光源
AddCone
加入錐形光源
AddPoint
加入點光源
Changcolor
改變光的顏色
Changstrength
改變光源的強度
Clear
清除所有的光源
MoveLight
移動光源
我們可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態的設置光源,可能會產生一些意想不到的效果。
DHTML Dynamic Lighting Effects
Move the cursor over the image and see the light track its movement. Click on the image to add additional lights and watch them all track the mouseover movement.
原文轉自:http://www.kjueaiud.com
老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月