用代碼做動態(tài)的濾鏡效果

小白兔

在這特別感謝黎民百興提供的Wave動態(tài)濾鏡代碼！

<DIV style="position:relative; top:0px; left:0px; width:800px;height:500px">
<STYLE type="text/css">
<!--
.time{
behavior:url(#default#time2);
}
t\:* {
behavior: url(#default#time2);
}
v\:* {
behavior: url(#default#VML);
}
-->
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace />
<div style="position:absolute; top:0; left:0; width:300; height:234;">
<IMG src="<IMG id="s1" src="</div>
<t:animate targetElement="s1" attributeName="filters.Wave.Phase" from="100" to="0" begin="0" dur="2" end="" autoreverse="false" repeatcount="indefinite"/></div>

Wave濾鏡

Wave濾鏡

<DIV style="position:relative; top:30px; left:0px; width:700px;height：300px;">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace />
<div style="position:absolute; top:0; left:0;"><font face=楷書 color=#00ff00 size=7>Wave濾鏡</font></div>
<div id=z1 style="position:absolute; top:40; left:0;filter: Wave(Add=0,Freq=3,Lightstrength=30,Phase=10,Strength=3) Flipv;"><font face=楷書 color=#00ff00 size=7>Wave濾鏡</font></div>
<t:animate targetElement="z1" attributeName="filters.Wave.Phase" from="500" to="0" begin="0" dur="3" end="" autoreverse="false" repeatcount="indefinite"/></div>

[ 本帖最后由 小白兔 于 2008-3-11 22:46 編輯 ]

小白兔

<DIV style=\"position:relative; top:30px; left:0px; width:700px;height:300 \">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />
<IMG id=\"t2\" src=\"http://media.imhb.cn/homepic/2007/12/8/20071208225517_52486.gif\" style=\"position:absolute; left:0; top:0; width:300; height:212;filter:glow(color=#ee14d2 strength=20);color:white\">

<t:animate targetElement=\"t2\" attributeName=\"filters.glow.strength\" from=\"6\" to=\"0\" begin=\"0\" dur=\"1\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/></div>

Glow濾鏡

<DIV style=\"position:relative; top:30px; left:0px; width:700px; height:150\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />

<div id=z2 style=\"width:100%;filter:glow(color=#1e90ff strength=16);color:white\"><FONT color=#00ff00 face=楷書 size=7>

Glow濾鏡</FONT></div>

<t:animate targetElement=\"z2\" attributeName=\"filters.glow.strength\" from=\"10\" to=\"0\" begin=\"0\" dur=\"1\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/></div>

對以上這段代碼的說明：

1）<DIV style=\"position:relative; top:30px; left:0px; width:700px; height:150\">是對以下內(nèi)容的相對定位。

　　

top:30px;是離頂部距離30px;left:0px; 是離左邊距離0px;

2）<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />

這是HTML+TIME下面指定內(nèi)容的前綴

3）<div id=z2 style=\"width:100%;filter:glow(color=#1e90ff strength=16);color:white\">這段是Glow濾鏡代碼。

id=z2 是對這個濾鏡的標簽(注：與下面的 targetElement=\"z2\"必須一致，同一個頁面不能使用同樣的id)

4）<t:animate targetElement=\"z2\" attributeName=\"filters.glow.strength\" from=\"10\" to=\"0\" begin=\"0\" dur=\"1\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/>這段是讓Glow連續(xù)性變化的代碼。

t:animate 是標記連續(xù)性地變化；

targetElement=\"z2\"表示目標單元為\"z2\",用來表示作用到\"z2\"上；

attributeName=\"filters.glow.strength\" 表示屬性的名字是\"filters.glow.strength\" ；

from=\"10\" to=\"0\"表示變化的范圍從10到0；

begin=\"0\" dur=\"1\" 表示從0秒鐘開始變化，變化一次的時間過程為1秒鐘；

autoreverse=\"false\"表示變化方式為不循環(huán),true為循環(huán)；

repeatcount=\"indefinite\"表示變換次數(shù)為重復變化。

[ 本帖最后由 小白兔 于 2008-3-22 13:11 編輯 ]

小白兔

<DIV style=\"position:relative; top:30px; left:0px; width:700px;height:200px\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />
<DIV align=center><DIV id=t3 style=\"FILTER: shadow(color=#3f4029, strength=29); WIDTH: 100%\"> <img src=\"http://media.imhb.cn/homepic/2007/12/26/20071226215655_61179.jpg\" width=201 height=151>
<t:animate targetElement=\"t3\" attributeName=\"filters.Shadow.strength\" from=\"80\" to=\"5\" begin=\"0\" dur=\"3\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/>
</div>
</div>
</div>

陰影字的效果

<DIV style=\"position:relative; top:30px; left:0px; width:700px;\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />

<div id=z3 style=\"position: absolute; filter:Shadow(color=#edb4ef,direction=135,strength=29)\"><font face=楷書 color=#ff00ff size=7><b>陰影字的效果</b></font><br>

<t:animate targetElement=\"z3\" attributeName=\"filters.Shadow.strength\" from=\"25\" to=\"0\" begin=\"0\" dur=\"2\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/>
</div></div></div>

小白兔

<DIV style=\"position:relative; top:30px; left:0px; width:700px;height:300px\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />
<DIV align=center>
<IMG id=t4 src=http://media.imhb.cn/homepic/2007/12/26/20071226215655_61179.jpg style=\"filter: Alpha(Opacity=100,Style=0)\" border=0>
<t:animate targetElement=\"t4\" attributeName=\"filters.Alpha.Opacity\" from=\"100\" to=\"0\" begin=\"0\" dur=\"4\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/>
</div>
</div>

Alpha濾鏡效果

<DIV style=\"position:relative; top:30px; left:0px; width:700px;height:120px\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace />
<DIV align=center><div id=z4 style=\"position: absolute; filter:filter: Alpha(Opacity=100,Style=0)\"><font face=華文新魏 color=#0000fa size=7><b>Alpha濾鏡效果</b></font><br>

<t:animate targetElement=\"z4\" attributeName=\"filters.Alpha.Opacity\" from=\"100\" to=\"0\" begin=\"0\" dur=\"4\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/>
</div>
</div>
</div>
<br><br><br>

祝福

兔兔真聰明！

快樂相隨

兔兔越研究越高深了，厲害。

雄杰獨倚

文字跟圖片都有了~來聽聽大師的講課了~

紅塵有你

新人剛來這里， 學習學習 這么好的效果

smallcat

謝謝兔兔哈 做帖子能用上的 辛苦了

海鷗

謝謝LZ 老師！這教程真不錯！