dreamweaver制作有趣的图片探照灯效果

2008-02-23 06:04:00来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折


  下面给各位介绍制作过程:

  第一步:准备图片

  我们需要两张图片,一张是背景图,选择一张您喜爱的图片;另一张是用来做探照灯用的,您能够用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">

  <p align="center" > <br><br><br><br><br>

  <img src="r.gif" width="60" height="60" style=" filter:alpha(opacity=100,style=2)"></p>

  </div>

  </div>


  第四步:添加动画和行为

  添加的动画是让探照灯来回移动,我想大家都会,这里不在多解释了,但是要注意动画的移动范围,并使其循环播放。

  所要添加的行为有三个:

  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()">

  <marquee behavior=scroll direction=right width=50 height=120 scrollamount=1 scrolldelay=0 ><font style="margin-top:50;writing-mode:tb-rl;font-size:9pt" face="楷体_GB2312" color=red>您想添加的文字<br> <br>

  </font>

  </marquee>

  <div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px">

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇: DREAMWEAVER中表单的应用连同处理操作

下一篇: Dreamweaver您未必了解的5个小技巧