HTML+TIME学习笔记（三）

莺燕音画 发表于 2008-8-7 11:50

第三课
 上节讲了位置的变化，那这节我来讲下颜色的变化，其实动画也无外乎颜色位置形状的各种变化组合出各类效果罢了，主要看的还是个人的灵感吧。
老规矩，先看例子：
<A href="http://roger01rao.ik8.com/htmlntime/jiaocheng/教程3.html">点击看效果</A>
 对了在这里我说一句，就是大家千万别复制代码了事,一定要自己编写过才有印象，养成一个好习惯真的很重要。
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML XMLNS:t="urn:schemas-microsoft-com:time"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>黄莺语柳紫燕归梁</TITLE> <STYLE type="text/css">  </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY>
欢迎光临“黄莺语柳紫燕归梁”的空间！ <t:animateColor id="color1" targetElement="b" attributeName="color" to="red" begin="1" dur="5" fill="hold"/>
欢迎光临“黄莺语柳紫燕归梁”的空间！ <t:animateColor id="color2" targetElement="c" attributeName="color" to="blue" begin="1" dur="5"/>
欢迎光临“黄莺语柳紫燕归梁”的空间！ <t:animateColor id="color2" targetElement="d" attributeName="color" to="green" begin="1" dur="5" autoreverse="true"/>
</BODY> </HTML><SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">为了让大家看的清楚些，我把字体设成华文琥珀，字体设成14号，大家可以看到有<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">3<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">个效果：<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">一个是字体逐渐显示为红色然后固定为红色；<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">一个是显示为蓝色后然后恢复成原来的原色；<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">最后一个是变为绿色后逐渐退回原来的颜色。<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">其实三个效果也就多了红色部分部分的代码：<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA"><t:animatecolor />，<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">标记连续性地变化文字或者背景的颜色；<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">attributeName <SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">表示的是属性名字，<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">譬如这里是<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">color；<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">autoreverse <SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">表示自动回转<SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">,<SPAN style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">如这里产生绿色再回转到黑色的效果。

[ 本帖最后由 roger01rao 于 2008-8-7 11:52 编辑 ]

一剑飘香红 发表于 2008-8-7 13:30

谢谢LZ的好东西,我收藏了

逝语发表于 2008-8-7 13:31

不錯..學習了.謝謝分享

白雪皑皑 发表于 2008-8-7 17:49

继续跟踪学习。

快乐相随 发表于 2008-8-8 00:36

多个变色，写成什么代码呢，不知道这样写对吗？ <HTML XMLNS:t=\"urn:schemas-microsoft-com:time\"> <HEAD> <META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\"> <META http-equiv=\"Content-Style-Type\" content=\"text/css\"> <TITLE>黄莺语柳紫燕归梁</TITLE> <STYLE type=\"text/css\">  </STYLE> <?IMPORT namespace=\"t\" implementation=\"#default#time2\"> </HEAD> <BODY> 欢迎光临“黄莺语柳紫燕归梁”的空间！ <t:animateColor id=\"color2\" targetElement=\"c\" attributeName=\"color\" to=\"blue\" begin=\"1\" dur=\"5\"/> <t:animateColor id=\"color3\" targetElement=\"c\" attributeName=\"color\" to=\"green\" begin=\"color2+5\" dur=\"5\"/> </BODY> </HTML>

莺燕音画 发表于 2008-8-8 01:13

对不对，你可以自己测试啊！多颜色的我会在以后发出来。

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

虽然偶不懂，再来支持下，辛苦

cxzcxz1212 发表于 2008-8-25 09:42

跟踪学习了~~谢谢LZ~~

制胜未来 发表于 2008-8-26 14:54

继续跟踪学习
谢谢！！！

雄杰独倚 发表于 2008-8-31 17:50

请教老师，这个fill=\"hold\"/>这个代码是说明的吗？

页: [1] 2

中画网's Archiver

HTML+TIME学习笔记（三）