用代码做动态的滤镜效果

小白兔

在这特别感谢黎民百兴提供的Wave动态滤镜代码！

<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="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg" style="position:absolute; left:0; top:0; width:300; height:247;">
<IMG id="s1" src="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg" style="position:absolute; left:0; top:234; width:300; height:234; filter:Wave(Add=0,freq=12,LightStrength=10,Phase=0,Strength=4) alpha(opacity=100) Flipv;">
</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\">是对以下内容的相对定位。

　　

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下面指定内容的前缀

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连续性变化的代码。

t:animate 是标记连续性地变化；

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\"表示变化方式为不循环,true为循环；

repeatcount=\"indefinite\"表示变换次数为重复变化。

[ 本帖最后由 小白兔 于 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 老师！这教程真不错！