巧用CSS的 Mask 滤镜
作者:冯永曜
在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来可就瘦小多了。不信?你看看下面的效果你就明白了。今天我在这里介绍的是Mask(遮罩)滤镜的巧妙用法。
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。
巧用CSS的 Mask 滤镜相关推荐
- html探照灯效果,巧用CSS的MASK滤镜
Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了.实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来 ...
- 巧用CSS的Glow滤镜
作者:冯永曜 对一个对象使用"glow"滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的"glow&qu ...
- 巧用CSS的Wave滤镜
作者:冯永曜 "wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果.它共有5个参数: "add ...
- 巧用CSS的BlendTrans滤镜
作者:冯永曜 BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效 ...
- 巧用CSS的RevealTrans滤镜
作者: 冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种.用它来进行网页之间的动态切换,简直 ...
- 巧用CSS的Light滤镜
作者: 冯永曜 Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的"方法(Method)"来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是 ...
- 巧用CSS的alpha滤镜
作者:冯永曜 "Alpha"滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过.一点不错,它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数 ...
- 巧用css的滤镜filter属性处理图片,高斯模糊,HTML页面黑白滤镜等
效果如下:使用css的filter滤镜属性.可以巧妙的设置图片高斯模糊和特效.包括灰色纪念清明节等悼念烈士英雄灰白效果. <img class='testimg' src="./img ...
- 巧用CSS制作艺术字
巧用CSS制作艺术字 ::.. 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. 西部电子 用blur滤镜做出的效果,代码如下: FILTER ...
最新文章
- 《如何高效学习》作者推荐!
- php 预订义变量,预约义变量 PHP
- 相较神经网络,大名鼎鼎的傅里叶变换,为何没有一统函数逼近器?答案在这...
- jenkins打完包在哪里
- aliyun服务器安装nc工具
- Vue.js 2 渐进式前端框架 的最佳学习方法
- Java基础(三十二)JDBC(2)连接数据库
- C#LeetCode刷题-栈
- 【Mysql】之基础sql语句模板
- 南京铁道学院计算机应用,南京铁道职业技术学院铁道交通运营管理专业
- 对unidbgrid的单元格操作
- go语言中错误处理方式
- java smtp pop3_Java基于smtp与pop3实现收发邮件的功能
- 计算机更新过后cad,升级windows10系统后cad无法打开的两种解决方法
- 每天10道Crypto Day3
- 暑假计算机教育培训总结,暑假信息技术培训心得
- ( )可用来更改计算机系统的设置,2018年职称计算机考试考前冲刺练习及答案(9)...
- react图片剪裁react-cropper
- IE无法打开网页的问题
- 上海市居住证积分提交材料