巧用CSS的MASK滤镜

蒙版过滤器可以为网页上的HTML组件对象制作一个矩形蒙版。什么是面具？如果你在Flash中使用过这个面具，你就会知道它就是这样的。其实你也可以这样理解面具，相当于用彩布盖住物体，但是里面的东西被挖走了。如果你还不明白，就看下面这张图，听我详细给你解释。

1蒙版滤镜的效果1。在上面的蒙版滤镜中使用这么深的颜色主要是为了让你看清楚效果。我们来看看蒙版滤镜的参数：它只有一个参数Color，即#RRGGBB格式的蒙版的颜色值。你只需要为DW3选择一个合适的颜色，比如上面的蒙版滤镜代码是：mask 1 { filter : mask(color=# 00ff 00)}。在下面的例子中，你会看到滤镜的颜色不是主要的，但是背景的颜色是关键的。让我们用蒙版滤镜做一些特效：1。多彩文字。

图2蒙版滤镜效果2上面这个效果怎么样，还不错！有点像图像，不是吗？这就是蒙版滤镜的效果。这里使用了一个白色滤镜，其代码为： mask 1 { filter 3360 mask(color=# ffffff)}。彩色文本颜色实际上是背景的颜色。制作方法也很简单，就是插入一个1*1的表格，给表格添加多色背景，在表格中输入文字，给单元格加载蒙版滤镜，就搞定了，不是很难吗？2.探照灯动画效果下面的探照灯效果用Flash做起来有点费力，但是可以用CSS滤镜做！由于探照灯效果是动态的，我只能抓取两张工艺图片给你看。想看动态效果，可以按照我说的做一个或者去我家(http:/fym888.go.163.com)看。

图3探照灯动画效果1 。

图4探照灯动画效果2下面介绍制作方法：这个效果比上面的例子稍微复杂一点，不过就是多点几下鼠标。1.插入一个层，我称之为“父层”，这个层是用来放要显示的内容(文字或图片)的。然后在这个图层上插入一个图层，我称之为子图层，主要用来产生蒙版效果。2.在父图层的属性面板上设置显示窗口，即设置图层的“Clip”属性，其中使用相对坐标，其中l和t为左上角的坐标；r和b是右下角的坐标。未来的子图层将只显示在您设置的窗口中。设置图层属性参数面板如下图所示：。

图5。我的父层是“层4”。我这里用整个父层作为显示窗口，也就是子层移动到父层的时候，它会是可见的，但是在父层之外是不可见的。3.我们在子层上插入一个透明背景的圆形图片。这里使用圆形图片的主要目的是探照灯的投影像一个圆。此外，圆圈外的图像部分必须是透明的，否则它将是一个移动的矩形框。然后在子图层上加载一个与父图层背景颜色相同的蒙版滤镜，放大子图层使其完全覆盖父图层的内容，这样在浏览器中就只能看到圆形图片的部分，这正是我们想要的。4.当然，要产生探照灯的效果，需要让圆形区域移动，这需要Dreamweaver的时间轴功能。在DW3中，拖动到子层，使其上的图片刚好覆盖父层内容的头部，按“Ctrl+F9”调出时间轴面板，将子层拖动到时间轴面板上，将最后一帧拖动到100帧，在第50帧插入关键帧，将子层的图片与父层内容的尾部重叠。在时间线面板上选择“循环”和“自动”。一个复杂的动画完成了。按F12看是不是有点凉。