CSS濾鏡雖然只能在IE瀏覽器中表現(xiàn)出效果,但是仍不失為網頁增加特效的好辦法。
1.CSS靜態(tài)濾鏡樣式 (filter)
CSS靜態(tài)濾鏡樣式的使用方法:{ filter : filtername( parameters1, parameters2, ...) }
Filter樣式 簡要說明 支持參數(shù)
alpha 設置圖片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur 在指定的方向和位置上產生動感模糊效果 add、direction、strength
chroma 對所選擇的顏色進行透明處理 color
dropShadow 在指定的方向和位置上產生陰影 color、offX、offY、positive
flipH 沿水平方向翻轉對象
flipV 沿垂直方向翻轉對象
glow 在對象周圍上發(fā)光 color、strength
gray 將對象以灰度處理
invert 逆轉對象顏色
light 對對象進行模擬光照
mask 對對象生成掩膜 color
shadow 沿對象邊緣產生陰影 color、direction
wave 在垂直方向產生正弦波形 add、freq、lightStrength、phase、strength
xray 改變對象顏色深度,并繪制黑白圖象
以上就是靜態(tài)濾鏡的全部內容,要注意的是CSS是區(qū)分大小寫的!
2.CSS動態(tài)濾鏡
動態(tài)濾鏡可以為頁面添加動人的淡入淡出、圖象轉化效果,它可以分為兩種blend(混合)和reveal(顯示),前者可以使對象漸漸消失或出現(xiàn),后者 提供了24種圖象轉化的效果。對于動態(tài)濾鏡的調用除去象在靜態(tài)濾鏡中要定義的濾鏡類型,參數(shù)等等,還用到腳本語言控制它的狀態(tài)。
首先,在開始一個動態(tài)效果之前,先需要進行裝備(Apply),然后播放(Play)動態(tài)效果,在動態(tài)效果進行中還可以中斷動態(tài)效果(Stop),以上可以用下面的方法實現(xiàn):
對象名.filters(濾鏡數(shù)值).Apply()
對象名.filters(濾鏡數(shù)值).Play()
對象名.filters(濾鏡數(shù)值).Stop()
對于濾鏡狀態(tài)的判斷可以通過“對象名.filters(濾鏡數(shù)值).status”判斷,該值為0時,表示濾鏡未執(zhí)行,為1時,表示濾鏡已經完成,為2時表示濾鏡在執(zhí)行中。在定義filter時,如上面所提到的,可以有混合(“filter:blendTrans(duration=時間數(shù)值)”,duration表示濾 鏡執(zhí)行需要的時間,單位為秒)和顯示(“filter:revealTrans(duration=時間數(shù)值,transition=過渡類型)”,過渡 類型為從0-23的數(shù)值)兩種。
濾鏡目前還未被W3C正式承認。濾鏡只是微軟IE瀏覽器的組成部分,不能用于Netscape瀏覽器。制定有關標準的組織正在就此進行討論,但尚未達成最后定論。在我看來,濾鏡是一種非常有趣而且是制作精彩的視覺效果必不可少的一部分。濾鏡能節(jié)省帶 寬,而且是你能在制作奇妙的視覺設計時使用文字格式,而不必先制作龐大的文字位圖以取得相同的效果。但由于這些功能尚未成為HTML的正式組成部分,所以并不是所有的瀏覽器都能看到這些特色。有些時候,你必須考慮以傳統(tǒng)的方式制作相同的效果,當然,你不得不繼續(xù)將龐大的GIF文件塞到網頁之中。
實例講解
現(xiàn)在非常多的朋友搞個人網頁,而且做的五彩繽紛,各有特色,但是比較多的朋友把大大的一幅圖象放在頁面上,致使頁面下載很慢,加上用GIF格式做動畫,盡管用GIF格式搞的動畫比較苗條,但是也不大合算。能否不用特別做的圖象,不用GIF格式做動畫,可以把頁面搞的生氣活現(xiàn)呢?可以,但JAVASCRIPT比較對一般初學者來說是比較難的,筆者今天要用IE本身內含的STYLE這個重量級的命令屬性中的RevealTrans和濾鏡來搞搞新意思!希望網友們能靈活運用這些濾鏡和頁面切換效果,把自己的主頁搞的有聲有色!不斷進步!
Style屬性可以應用在標簽中,更可用廣泛應用在<table><tr><td><body><center><img><input><font><form><frame><label><map>等等標簽中,更重要的是,它可用在標簽中。
頁面切換效果:
在頁面前部與之間加入""
說明:duration為頁面切換的時間長度,3.000表示3秒鐘,一般可以直接輸入3便可;transition為切換效果,從1-23共22種不同的切換效果,其中23為隨機效果。
濾鏡效果:
Photoshop的濾鏡用的多了吧,在頁面中也用濾鏡搞搞新意思吧!
語法: filter:filtername(fparameter1,fparameter2...)
(Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數(shù))
濾鏡說明:
Alpha:設置透明層次.
blur:創(chuàng)建高速度移動效果,即模糊效果.
Chroma:制作專用顏色透明.
DropShadow:創(chuàng)建對象的固定影子.
FlipH:創(chuàng)建水平鏡像圖片.
FlipV:創(chuàng)建垂直鏡像圖片.
glow:加光輝在附近對象的邊外.
gray:把圖片灰度化.
invert:反色.
light:創(chuàng)建光源在對象上.
mask:創(chuàng)建透明掩膜在對象上.
shadow:創(chuàng)建偏移固定影子.
wave:波紋效果.
Xray:使對象變的像被x光照射一樣.
1、濾鏡:Alpha
語 法:filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Sty le=style,StartX=startX,StartY=startY,F(xiàn)inishX=finishX,F(xiàn)inishY=finishY)
說明:
Opacity:起始值,取值為0~100, 0為透明,100為原圖。
FinishOpacity:目標值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",2)
2、濾鏡:blur
語法:filter:Blur(Add = add, Direction = direction, Strength = strength)
說明:
Add:一般為1,或0。
Direction:角度,0~315度,步長為45度。
Strength:效果增長的數(shù)值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、濾鏡:Chroma
語法:filter:Chroma(Color = color)
說明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、濾鏡:DropShadow
語法:filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)
說明:Color:#rrggbb格式,任意。
Offx:X軸偏離值。
Offy:Y軸偏離值。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、濾鏡:FlipH
語法:filter:FlipH
例子:filter:FlipH
6、濾鏡:FlipV
語法:filter:FlipV
例子:filter:FlipV
7、濾鏡:glow
語法:filter:Glow(Color=color, Strength=strength)
說明:
Color:發(fā)光顏色。
Strength:強度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡:gray
語法:filter:Gray
例子:filter:Gray
9、濾鏡:invert
語法:filter:Invert
例子:filter:Invert
10、濾鏡:mask
語法:filter:Mask(Color=color)
例子:filter:Mask (Color="#FFFFE0")
11、濾鏡:shadow
語法:filter:Shadow(Color=color, Direction=direction)
說明:
Color:#rrggbb格式。
Direction:角度,0-315度,步長為45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡:wave
語法:filter: Wave(Add=add,F(xiàn)req=freq,LightStrength=strength,Phase=phase, Strength=strength)
說明:
Add:一般為1,或0。
Freq:變形值。
LightStrength:變形百分比。
Phase:角度變形百分比。
Strength:變形強度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、濾鏡:Xray
語法:filter:Xray
例子:filter:Xray;
14.顏色變化
語法:filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#B5CCFA", EndColorStr="#B5CCFA");