下面給各位介紹制作過程：
第一步：准備圖片
我們需要兩張圖片，一張是背景圖，選擇一張你喜愛的圖片；另一張是用來做探照燈用的，你可以用fireworks等作圖工具繪一圓形的圖案。如下所示：
背景圖（girl.jpg 尺寸255x190） 圓形圖（替換webdesign.chinaitlab.com/dwsl/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出界的部分剪掉，這樣才能達到預定效果。接著把替換webdesign.chinaitlab.com/dwsl/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)
最後，為了使探照燈具有層次感，再給圖片替換webdesign.chinaitlab.com/dwsl/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="替換webdesign.chinaitlab.com/dwsl/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">
<p align="center" > <br><br><br><br><br>
<img src="替換webdesign.chinaitlab.com/dwsl/r.gif" width="150" height="150" style=" filter:alpha(opacity=100,style=2)"></p>
</div>
</div>
這樣我們再看看下面的效果。