第四课
上节讲解了颜色的变化,那这节就让我来讲下形状的变化。
先来看看例子:
点击看效果
接下来看代码:
<!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"> <!-- .time{ behavior:url(#default#time2); } --> </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY>
<img id="t1" src="http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg" style="width:0; height:0; position:absolute; left:0; top:0;"> <t:animate id="large1" targetElement="t1" attributeName="width" from="0" to="500" begin="1" dur="3" fill="hold" /> <t:animate id="large2" targetElement="t1" attributeName="height" from="0" to="398" begin="large1.begin" dur="3" fill="hold" />
</BODY> </HTML>
效果描述:就是让这个图片从0.0位置逐渐变化到500.398坐标。
这里与前面代码不同的无非就是<t:animate/>标记,这个标记是用来连续性变化图像大小的,其他属性前面都讲过了,这里只是重复应用罢了。
这里我给大家留个作业:这里的形状变化是从左上角开始到右下脚的,如何做到从中间逐渐放大到两边呢?希望大家能做这个练习,并发表在回复里。 |