用代码做动态的滤镜效果

小白兔 发表于 2008-3-11 22:26

在这特别感谢黎民百兴提供的Wave动态滤镜代码！ <BR><BR><BR>
<DIV style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 500px">
<STYLE type=text/css>

</STYLE>

<DIV style="LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 234px"><IMG style="LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 247px" src="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg"> <IMG id=s1 style="FILTER: Wave(Add=0,freq=12,LightStrength=10,Phase=0,Strength=4) alpha(opacity=100) Flipv; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 234px; HEIGHT: 234px" src="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg"> </DIV><?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /><t:animate attributeName = "filters.Wave.Phase" from = "100" targetElement = "s1" to = "0" autoReverse = "false" begin = "0" dur = "2" end = "" repeatCount = "indefinite"></t:animate></DIV><BR><BR><BR><BR><DIV style="position:relative; top:0px; left:0px; width:800px;height:500px"><BR><STYLE type="text/css"><BR><BR></STYLE><BR><?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /><BR><div style="position:absolute; top:0; left:0; width:300; height:234;"><BR><IMG src="<A href="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg">http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg</A>" style="position:absolute; left:0; top:0; width:300; height:247;"><BR><IMG id="s1" src="<A href="http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg">http://media.imhb.cn/homepic/2008/3/11/20080311203703_41184.jpg</A>" 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;"><BR></div><BR><t:animate targetElement="s1" attributeName="filters.Wave.Phase" from="100" to="0" begin="0" dur="2" end="" autoreverse="false" repeatcount="indefinite"/></div><BR><BR><BR><BR><BR>
<DIV style="LEFT: 0px; WIDTH: 700px; POSITION: relative; TOP: 30px; HEIGHT: 180px">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>

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

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

小白兔 发表于 2008-3-11 22:32

Glow滤镜效果

<DIV style=\"LEFT: 0px; WIDTH: 700px; POSITION: relative; TOP: 30px; HEIGHT: 300px\"><IMG id=t2 style=\"FILTER: glow(color=#ee14d2 strength=20); LEFT: 0px; WIDTH: 300px; COLOR: white; POSITION: absolute; TOP: 0px; HEIGHT: 212px\" src=\"http://media.imhb.cn/homepic/2007/12/8/20071208225517_52486.gif\"> <?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animate attributeName = \"filters.glow.strength\" from = \"6\" targetElement = \"t2\" to = \"0\" autoReverse = \"false\" begin = \"0\" dur = \"1\" end = \"\" repeatCount = \"indefinite\"></t:animate></DIV>
<P><BR><BR><BR><DIV style=\"position:relative; top:30px; left:0px; width:700px;height:300 \"><BR><STYLE>.time {<BR> BEHAVIOR: url(#default#time2)<BR>filter: /*ALE*/ }<BR></STYLE><BR><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><BR><IMG id=\"t2\" src=\"<A href=\"http://media.imhb.cn/homepic/2007/12/8/20071208225517_52486.gif\">http://media.imhb.cn/homepic/2007/12/8/20071208225517_52486.gif</A>\" style=\"position:absolute; left:0; top:0; width:300; height:212;filter:glow(color=#ee14d2 strength=20);color:white\"></P>
<P><t:animate targetElement=\"t2\" attributeName=\"filters.glow.strength\" from=\"6\" to=\"0\" begin=\"0\" dur=\"1\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/></div></P>
<P> </P>
<P> </P>
<P> </P>
<DIV style=\"LEFT: 0px; WIDTH: 700px; POSITION: relative; TOP: 30px; HEIGHT: 150px\">
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>

<DIV id=z2 style=\"FILTER: glow(color=#1e90ff strength=16); WIDTH: 100%; COLOR: white\"><FONT face=楷书 color=#00ff00 size=7>Glow滤镜</FONT></DIV><t:animate attributeName = \"filters.glow.strength\" from = \"10\" targetElement = \"z2\" to = \"0\" autoReverse = \"false\" begin = \"0\" dur = \"1\" end = \"\" repeatCount = \"indefinite\"></t:animate></DIV>
<P><BR><BR><BR><FONT color=magenta><DIV style=\"position:relative; top:30px; left:0px; width:700px; height:150\"></FONT><BR><FONT color=black><STYLE>.time {<BR> BEHAVIOR: url(#default#time2)<BR>filter: /*ALE*/ }<BR></STYLE><BR><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /></FONT></P>
<P><div <FONT color=green>id=z2</FONT> style=\"width:100%;<FONT color=blue>filter:glow(color=#1e90ff strength=16);color:white</FONT>\"><FONT color=#00ff00 face=楷书 size=7></P>
<P>Glow滤镜</FONT></div></P>
<P><t:animate targetElement<FONT color=green>=\"z2</FONT>\" attributeName=\"filters.glow.strength\"<FONT color=purple> from=\"10\" to=\"0\"</FONT><FONT color=darkorange> begin=\"0\" dur=\"1\"</FONT> end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/></div></P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P><FONT face=黑体 color=red size=6>对以上这段代码的说明：</FONT></P>
<P><FONT size=4>1）</FONT><FONT color=#ff00ff><DIV style=\"position:relative; top:30px; left:0px; width:700px; height:150\"></FONT><FONT size=4>是对以下内容的相对定位。</FONT></P>
<P>　　</P>
<P><FONT size=4><FONT color=#ff00ff>top:30px;</FONT>是离顶部距离30px;<FONT color=#ff00ff>left:0px; </FONT>是离左边距离0px;</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>2）</FONT><FONT color=#000000><STYLE>.time {<BR> BEHAVIOR: url(#default#time2)<BR>filter: /*ALE*/ }<BR></STYLE><BR><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /></FONT></P>
<P><FONT size=4>这是HTML+TIME下面指定内容的前缀</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>3）</FONT><FONT size=2><</FONT>div <FONT color=green>id=z2</FONT> style=\"width:100%;<FONT color=blue>filter:glow(color=#1e90ff strength=16);color:white</FONT>\"><FONT size=4>这段是Glow滤镜代码。</FONT></P>
<P><FONT size=4></FONT> </P>
<P> <FONT size=4><FONT color=green>id=z2</FONT> 是对这个滤镜的标签(<FONT color=red>注：与下面的 targetElement=\"z2\"必须一致，同一个页面不能使用同样的id</FONT>)</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>4）</FONT><FONT size=2><</FONT>t:animate targetElement<FONT color=green>=\"z2</FONT>\" attributeName=\"filters.glow.strength\"<FONT color=purple> from=\"10\" to=\"0\"</FONT><FONT color=darkorange> begin=\"0\" dur=\"1\"</FONT> end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/><FONT size=4>这段是让Glow连续性变化的代码。</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4> t:animate 是标记连续性地变化；</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>targetElement<FONT color=green>=\"z2</FONT>\"表示目标单元为\"z2\",用来表示作用到\"z2\"上；</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>attributeName=\"filters.glow.strength\"<FONT color=purple> </FONT>表示属性的名字是\"filters.glow.strength\"<FONT color=purple> <FONT color=#8c5100>；</FONT></FONT></FONT></P>
<P><FONT size=4><FONT color=purple></FONT></FONT> </P>
<P><FONT size=4><FONT color=purple>from=\"10\" to=\"0\"</FONT></FONT><FONT size=4>表示变化的范围从10到0；</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4><FONT color=#ff8c00>begin=\"0\" dur=\"1\"</FONT> 表示从0秒钟开始变化，变化一次的时间过程为1秒钟；</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4>autoreverse=\"false\"表示变化方式为不循环,true为循环；</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4> repeatcount=\"indefinite\"表示变换次数为重复变化。</FONT></P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4></FONT> </P>
<P><FONT size=4></FONT> </P>

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

小白兔 发表于 2008-3-11 22:44

Shadow滤镜效果

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

<DIV id=z3 style=\"FILTER: Shadow(color=#edb4ef,direction=135,strength=29); POSITION: absolute\"><FONT face=楷书 color=#ff00ff size=7><B>阴影字的效果</B></FONT><BR><t:animate attributeName = \"filters.Shadow.strength\" from = \"25\" targetElement = \"z3\" to = \"0\" autoReverse = \"false\" begin = \"0\" dur = \"2\" end = \"\" repeatCount = \"indefinite\"></t:animate></DIV></DIV>
<DIV></DIV>
<P><BR><BR><BR><DIV style=\"position:relative; top:30px; left:0px; width:700px;\"><BR><STYLE>.time {<BR> BEHAVIOR: url(#default#time2)<BR>filter: /*ALE*/ }<BR></STYLE><BR><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /></P>
<P><div id=z3 style=\"position: absolute; filter:Shadow(color=#edb4ef,direction=135,strength=29)\"><font face=楷书 color=#ff00ff size=7><b>阴影字的效果</b></font><br></P>
<P><t:animate targetElement=\"z3\" attributeName=\"filters.Shadow.strength\" from=\"25\" to=\"0\" begin=\"0\" dur=\"2\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/><BR></div></div></div></P>
<P> </P>
<P> </P>
<P> </P>

小白兔 发表于 2008-3-11 22:49

Alpha滤镜效果

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

<DIV align=center>
<DIV id=z4 style=\"FILTER: filter: Alpha(Opacity=100,Style=0); POSITION: absolute\"><FONT face=华文新魏 color=#0000fa size=7><B>Alpha滤镜效果</B></FONT><BR><t:animate attributeName = \"filters.Alpha.Opacity\" from = \"100\" targetElement = \"z4\" to = \"0\" autoReverse = \"false\" begin = \"0\" dur = \"4\" end = \"\" repeatCount = \"indefinite\"></t:animate></DIV></DIV></DIV>
<P><BR><BR><BR><DIV style=\"position:relative; top:30px; left:0px; width:700px;height:120px\"><BR><STYLE>.time {<BR> BEHAVIOR: url(#default#time2)<BR>filter: /*ALE*/ }<BR></STYLE><BR><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><BR><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></P>
<P><t:animate targetElement=\"z4\" attributeName=\"filters.Alpha.Opacity\" from=\"100\" to=\"0\" begin=\"0\" dur=\"4\" end=\"\" autoreverse=\"false\" repeatcount=\"indefinite\"/> <BR></div><BR></div><BR></div><BR><br><br><br></P>
<P> </P>
<P><BR> </P>

祝福发表于 2008-3-11 22:55

兔兔真聪明！

快乐相随 发表于 2008-3-11 23:06

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

雄杰独倚 发表于 2008-3-12 02:26

文字跟图片都有了~来听听大师的讲课了~

红尘有你 发表于 2008-3-12 08:29

新人刚来这里，
学习学习
这么好的效果

smallcat 发表于 2008-3-12 10:57

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

海鸥发表于 2008-3-14 10:05

谢谢LZ 老师！这教程真不错！

页: [1] 2 3 4 5 6

中画网's Archiver