莺燕音画 发表于 2008-8-8 14:47

HTML＋TIME学习笔记（十）

<P class=ft style="MARGIN: auto 0cm; TEXT-ALIGN: center" align=center><FONT face=宋体 color=#000000 size=3>第十课</FONT></P>
<P class=ft style="MARGIN: auto 0cm"><FONT size=3><FONT color=#000000><FONT face=宋体><SPAN lang=EN-US>   </SPAN>上一节我们讲了<SPAN lang=EN-US>HTML+TIME+CSS</SPAN>来做滤镜效果，但那个是静态的，这一节我们来学习下动态效果如何制作。</FONT></FONT></FONT></P>
<P class=ft style="MARGIN: auto 0cm"><FONT face=宋体 color=blue size=5><A href="http://roger01rao.ik8.com/htmlntime/jiaocheng/教程10.html"><FONT face=宋体 color=blue size=5>点这里看效果</FONT></A></FONT></P>
<P class=ft style="MARGIN: auto 0cm"><FONT face=宋体 color=#000000 size=3>代码如下： </FONT></P>
<P class=ft style="MARGIN: auto 0cm"><SPAN lang=EN-US><FONT face=宋体 color=#000000 size=3>&lt;img id="image4" src=" http://roger01rao.ik8.com/htmlntime/jiaocheng/<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /><st1:chmetcnv TCSC="0" NumberType="1" Negative="False" HasSpace="False" SourceValue="5" UnitName="a" w:st="on">05a</st1:chmetcnv>.jpg" style="position:absolute; left:20; top:150; </FONT></SPAN><SPAN lang=EN-US><FONT size=3><FONT color=#000000><FONT face=宋体>filter:progid:DXImageTransform.Microsoft.glow(color='pink',strength='0',enabled='false');"&gt;<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></FONT></FONT></FONT></SPAN></P>
<P class=ft style="MARGIN: auto 0cm"><SPAN lang=EN-US><FONT size=3><FONT color=#000000><FONT face=宋体>&lt;t:set id="glowset1" targetElement="image4" attributeName="filters.item('DXImageTransform.Microsoft.glow').enabled" to="true" </FONT></FONT></FONT></SPAN><SPAN lang=EN-US><FONT size=3><FONT color=#000000><FONT face=宋体>begin="glow1.begin" end="glow1.end" /&gt;<o:p></o:p></FONT></FONT></FONT></SPAN></P>
<P class=ft style="MARGIN: auto 0cm"><SPAN lang=EN-US><FONT size=3><FONT color=#000000><FONT face=宋体>&lt;t:animate id="glow1" targetElement="image4" attributeName="filters.item('DXImageTransform.Microsoft.glow').strength" from="0" </FONT></FONT></FONT></SPAN><SPAN lang=EN-US><FONT face=宋体 color=#000000 size=3>to="20" begin="1" dur="15" autoreverse="true" repeatcount="4" /&gt; </FONT></SPAN></P>
<P class=ft style="MARGIN: auto 0cm"><FONT size=3><FONT color=#000000><FONT face=宋体><SPAN lang=EN-US>    </SPAN>大家可以看到，上面的效果其实也就是以前讲过的属性的综合运动，这个效果就是图片动态运动发光。首先需要设置发光颜色和不能显示，然后再设置它可以显示，接着让发光强度从<SPAN lang=EN-US>0</SPAN>到<SPAN lang=EN-US>10</SPAN>增长，也就产生了动态效果，当然<SPAN lang=EN-US>CSS</SPAN>静态滤镜还有很多，在上一节我已经一一列举了。在演示里我提供给大家运动发光效果，大家自己可以去尝试一下另外的效果看看，如果有哪个滤镜不会出效果，可以在回复帖子里留言，大家一起来学习。</FONT></FONT></FONT></P>

一剑飘香红 发表于 2008-8-8 14:55

老规矩,收了,谢谢

紫色灵枫 发表于 2008-8-8 14:57

我来学习了

快乐相随 发表于 2008-8-8 20:59

学习一下，这个动态移动速度好像有点慢

文子 发表于 2008-8-8 22:56

虽然偶不懂，进来支持下

冰雪飞梦 发表于 2008-10-16 00:04

好好学习,天天向上.

雨丝丝 发表于 2008-10-26 12:08

学习学习哦~~
页: [1]
查看完整版本: HTML＋TIME学习笔记（十）