|
7、Gray ,Invert,Xray 滤镜 语法：{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。 效果如下：
8、Light 滤镜 语法：Filter{light} 这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性，那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有：
可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。后面几页会有具体范例。 9、Mask 滤镜 语法：{filter:mask(color=color)} 使用"MASK"属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。 10、Shadow 滤镜 语法：{filter:shadow(color=color,direction=direction)} 利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。 filter:shadow(color=red,direction=225)
Shadow 滤镜
滴水檐茶坊制作
Shadow 滤镜
滴水檐茶坊制作
Shadow 滤镜
滴水檐茶坊制作
11、Wave 滤镜 语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}"wave" 属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”， “ADD”表示是否要把对象按照波形样式打乱， “FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹， “LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0----100， “PHASE”参数用来设置正弦波的偏移量。 “STRENGTH”代表振幅大小。
| ||||||||||||||||
|
下面我们来看几个生动的例子！下面这个程序是用light滤镜模拟雷达屏幕，并且有一架飞机被发现。当然编这个程序要对script 比较熟悉，还要知道lighy滤镜的属性和方法。 1、雷达屏幕 在这漆黑的夜里，英雄，你能看到你的美女在哪里吗？什么样子看的清吗，她的那颗炽热跳动的心你能感觉到吗？ 可以说本页效果需要一定的JAVASCRIPT基础，属于CSS和JAVASCRIPT的高级运用。 3、Glow滤镜 |
|
Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩?如果你用过Flash中的遮罩，你就会知道了，就是那个样子了。实际上对于遮罩你也可以这样来理解，相当于用一块有色布把物件盖起来，但内容却被挖去了。若你还不明白，就看下面的图片再听我给你细说。  图1 mask滤镜效果1 在上面这mask滤镜中用这么深的颜色，主要是让你能清楚地看出效果来。让我们来看一下mask滤镜的参数： 它只有一个参数Color，即遮罩的颜色 以#RRGGBB 格式的颜色值。 你只要在DW3中给它选择一种适合的颜色就OK了，如上面的mask滤镜代码就是：.mask1 { filter:mask(color=#00ff00) }，在下面的例子中你会看到，其实滤镜的颜色不是主要的，关键的倒是背景的颜色。 下面我们用mask滤镜做几个特效： 1、五彩缤纷的文字  图2 mask滤镜效果2 上面这种效果怎么样，还不错吧！有点象图象是不是？这就是mask滤镜的效果。这里用了个白色滤镜，其代码是：.mask1 { filter:mask(color=#ffffff) }。五彩缤纷的文字颜色实际上就是背景的颜色。其制作方法也很简单，就是插入一个1*1的表格，给表格加上多彩色的背景，在表格中输入文字，给单元格加载一个mask 滤镜，就做好了，不难吧？！ 2、探照灯动画效果 下面的这种探照灯效果，用Flash做都要费点神，想不到用CSS滤镜却也能做出来！由于探照灯效果是动态的，我只能抓两张过程图片给你看看，要看动态效果，那你就根据我讲的动手做一个或去我家（http:/fym888.go.163.com）看。  图3 探照灯动画效果1  图4 探照灯动画效果2 下面介绍制作方法： 这种效果比起上面的例子来要复杂一点，但也就是多点几次鼠标而已。 1、插入一个图层，我称其为“父层”，该层用来放要显示的内容（文字或图片）。再在该层上插入一个层，我称其为子层，它主要用来产生遮罩效果。 2、在父层的属性面板上设置显示窗口，也就是设置图层的“Clip”属性，在该属性中用的是相对坐标，其中：L、T是左上角坐标；R、B 是右下角坐标。以后的子层将只有在你设置的窗口中才显示。设置好的层属性参数面板如下图所示：  图5 层属性面板 我这里的父层是“Layer4”，我在这里把整个父层都作为显示窗口，也就是当子层运动到父层时就可见，在父层之外不可见。 3、我们在子层上插一个背景透明的圆形图片，这里用圆图形的目的主要是探照灯光的投影是个似圆形，另外圆外的图象部分必须透明，否则看到的将是一个矩形方框在移动。然后在子层上加载一个颜色与父层背景颜色相同的mask滤镜，并把子层拉大，使其能完全覆盖父层的内容,这样在浏览器中父层上的内容就只有圆形图片那一部分能看见，这正是我们希望的效果。 4、当然要产生探照灯的效果，就要使那块圆形区域动起来，这就要用Dreamweaver的时间线（Timeline)功能了。在DW3中先拖到子层，使其上的图片正好覆盖父层内容的首部，按“Ctrl+F9”，调出时间线面板，把子层拖到时间线面板上，把最后一帧拖到100帧，再在第50帧插入一个关键帧，并把子层的图片与父层内容的尾部重合，在时间线面板上选取“Loop”（循环播放）和“Auto”（自动播放），一切OK。 一幅复杂的动画完成，按F12看看，是不是有点酷？！ |
|
实例效果：请把鼠标放上去看看
 第一步：把下面的脚本插入<head>与</head>之间： <script> function off(she){ function moving(s){ </script> 第二步：把下面的脚本插入<body>与</body>之间： <p><a href="../index.htm"><img src="c.jpg" width="200" height="138" style="position:absolute;top:70;left:390;filter:blur(add=1,direction=80,strength=2)" onMouseOver="on(this)" onMouseOut="off(this)" width="337" height="87" border="0"></a> </p> |
|
实例效果：点击此处 按Ctrl键在框内单击鼠标左键即选择所有代码 有很多网友都问这个效果是怎么做的，因为单独说起来很麻烦的,所以我在这里做个小小教程。原理是这样的：用javascript来给css中的Wave滤镜产生一个循环，检测Wave的freq（频率）值是否达到100，如果没达到，则+5，直到达到100。然后将这个JS用在鼠标事件上。下面我们来看看动态菜单效果是怎样做的。 第一步：在<head>与</head>之间插入以下JS： 第二步：把下面的脚本插入<body>与</body>之间：
|
|
实例效果：点击此处 第二步：把下面的脚本插入<body>与</body>之间：
|
4799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
