用DW制作有趣的图片探照灯效果
下面给各位介绍制作过程:
第一步:准备图片
我们需要两张图片,一张是背景图,选择一张你喜爱的图片;另一张是用来做探照灯用的,你可以用fireworks等作图工具绘一圆形的图案。如下所示:
背景图(girl.jpg 尺寸255x190) 圆形图(r.gif 尺寸:60x60)
第二步:建两个层
用Dreamweaver建两个层layer1和layer2。
层layer1用来放置背景图片,所以层的大小和图片一致,即255x190,然后将图片girl.jpg插入层,或者将图片设置为背景均可;接着给层设置clip属性,clip可以使超出该层的部分被剪切掉,clip也设置成图片大小,即左上角坐标取(0,0),右下角坐标取(255,190)。设置clip属性这一步很关键。层layer1的位置任意。
层layer2是用来放探照灯的,它必须是layer1的子层。所谓子层,也就是代码是嵌套的:
<div id="layer1"...><div
id="layer2"...>...</div></div>
由于层layer2将被设置为可以拖动的,为了保证层在被拖动过程中始终能覆盖住层layer1,必须将层layer2的大小至少设置为layer1的两倍大,即设置为510x380;现在你明白设置层layer1的clip属性的重要性了吧:层layer2比层layer1大,用clip将层layer2出界的部分剪掉,这样才能达到预定效果。接着把r.gif插入到层layer2中,注意要插到层的中心处。然后设置层layer2的位置,由于层layer2是层layer1的子层,所以起点坐标采用相对坐标,即(-255,-190)。
全部完成后效果如下:
|
(其中外框为层layer2,内框为层layer1。)
第三步:添加css滤镜
先给层layer2添加mask滤镜,mask顾名思义就是给layer2戴个面具,语法是:
filter:mask(color=black)
这样layer2就只剩下中间那个透明的圆了。如果你觉得太黑了,可以对层layer2再加个alpha滤镜,使其微微透明,语法是:
filter:alpha(opacity=80)
最后,为了使探照灯具有层次感,再给图片r.gif加个alpha滤镜,style取值2,即圆形。代码是:
filter:alpha(opacity=100,style=2)
全部完成后的代码如下:
<div
id="Layer1" style="position:absolute; left:0px; top:0px;
width:255px; height:190px; z-index:1; clip: rect(0 255 190 0);
background-image: url(girl.jpg);
layer-background-image: url(girl.jpg);
border: 1px none #000000"> <div id="Layer2"
style="filter:mask(color=black) alpha(opacity=80);position:absolute;
width:510px; height:380px; z-index:2; left: -255px; top: -100px"> |
第四步:添加动画和行为
添加的动画是让探照灯来回移动,我想大家都会,这里不在多解释了,不过要注意动画的移动范围,并使其循环播放。
所要添加的行为有三个:
1.鼠标移上时动画停止播放;
2.鼠标移开时动画继续播放;
3.使层layer2可以被拖动。注意设置可以被拖动的范围,不要太大了,以防止出界。
最后可以再加点说明文字,全部完成后的代码是:
<div
id="Layer1" style="cursor:crosshair;position:absolute;
left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190
0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg);
border: 1px none #000000"
onMouseOut="MM_timelinePlay('Timeline1')"
onMouseOver="MM_timelineStop()"> |
我们再看看下面的效果:
这是鲜花!
这是阴阳图!
这是磁盘!
这是世界地图!
这是什么玩意?!别奇怪,这是图形字体,你只要将这些图形字体取代r.gif就可以了!
webdings字体和wingdings字体是常见的两种图形字体,输入这些字体时可以先输入&#,然后再其后面加上数字编号。如:
<font style="font:150px
wingdings">|</font>
这是鲜花的图案。当然你还可以选择很多你喜爱的图案,任意组合。