静态网页设计与制作 教学课件 作者 胡汉辉 模块七.pptVIP

7.3.1 利用CSS制作特效 图7-48 Gray滤镜设置 3)设置透明度渐变。 7.3.1 利用CSS制作特效 图7-49 Alpha滤镜设置 4)设置X光照片效果。 7.3.1 利用CSS制作特效 图7-50 Xray滤镜设置 1)打开sub3.html文件，新建CSS样式。 7.3.1 利用CSS制作特效 图7-51 模糊效果 2)设置阴影效果。 图7-52 阴影效果 3)设置轮廓阴影效果。 7.3.1 利用CSS制作特效 图7-53 轮廓阴影效果 4)设置边缘光晕效果。 图7-54 边缘光晕效果 5)设置波浪扭曲效果。 7.3.1 利用CSS制作特效 图7-55 波浪扭曲效果 7.3.2 使用行为制作特效 (1)为页面设置交换图像1)打开sub04.html，选择左侧显示的图片，并且设定图片的名称为“change”，如图7-57所示。 正文_Embed_435.png 7.3.2 使用行为制作特效 正文_Embed_436.png 图7-56 交换图像效果 图7-57 设置图片名称 7.3.2 使用行为制作特效 2)打开“行为”面板，选择【交换图像】命令，弹出“交换图像”对话框，如图7-58所示。3)如图7-59所示，此时在“行为”面板中出现了两条行为。 正文_Embed_437.png 7.3.2 使用行为制作特效 正文_Embed_438.png 图7-58 “交换图像”对话框 图7-59 “交换图像”行为(2)设置效果1)如图7-61所示，打开sub04.html，选择所示图片，分别为这3张图片命名为“pic1”、“pic2”、“pic3”。 7.3.2 使用行为制作特效 正文_Embed_439.png 正文_Embed_440.png 图7-60 效果比较 图7-61 设置图片名称 7.3.2 使用行为制作特效 2)选择“pic1”，打开“行为”面板，选择【效果】→【晃动】命令。3)此时在“行为”面板中出现了1条行为，表示当鼠标单击的时候，晃动图片。 正文_Embed_441.png 7.3.2 使用行为制作特效 正文_Embed_442.png 图7-62 “晃动”对话框 图7-63 修改行为的事件4)选择“pic2”，打开“行为”面板，选择【效果】→【增大/收缩】命令。(3)设置弹出信息 7.3.2 使用行为制作特效 正文_Embed_443.png 7.3.2 使用行为制作特效 正文_Embed_444.png 图7-64 “增大/收缩”对话框 图7-65 弹出信息框特效1)选择“pic3”，打开“行为”面板，选择“弹出信息”命令。 7.3.2 使用行为制作特效 2)如图7-67所示，此时在“行为”面板中出现了1条行为，该行为表示当鼠标单击图片的时候弹出信息。 正文_Embed_445.png 正文_Embed_446.png 图7-66 “弹出信息”对话框 图7-67 “弹出信息”行为 7.3.3 使用时间轴制作特效 (1)创建简单动画1)插入一个AP Div。2)在AP Div中插入图片，并将AP Div移动到动画开始的位置，如图7-69所示。 正文_Embed_447.png 7.3.3 使用时间轴制作特效 正文_Embed_448.png 图7-68 插入AP Div 图7-69 插入图片3)选择AP Div，在时间轴的第1帧处单击鼠标右键，选择【添加对象】命令，如图7-70所示。4)选择最后的关键帧，将AP Div移动到结束的位置。 7.3.3 使用时间轴制作特效 正文_Embed_449.png 7.3.3 使用时间轴制作特效 正文_Embed_450.png 图7-70 添加对象 图7-71 设置结束关键帧效果 7.3.3 使用时间轴制作特效 (2)增加关键帧1)插入一个关键帧。2)选择该新添加的关键帧，再次移动AP Div的位置。 正文_Embed_451.png 7.3.3 使用时间轴制作特效 正文_Embed_452.png 图7-72 增加关键帧 图7-73 添加新的对象3)为时间轴添加行为。4)在“行为”面板上，可以看到增加了一条停止时间轴的行为，如图7-75所示。 7.3.3 使用时间轴制作特效 正文_Embed_453.pn