巧用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。
相关文章：
Google Analytics功能篇 - 如何跟踪邮件打开率与点击率
有些朋友总会问我，在作邮件营销时，应该如何来跟踪这些流量呢？以便能知道发送的成功率，打开率，点击邮件中的链接数量，怎么实现这样的功能呢？ 另外，有一个做邮件群发的朋友给我说&…
Google排名第一的技术，引数十万人关注！网友：差点我就放弃了！
毋庸置疑，Python越来越被认可为程序员新时代的风口语言。无论是刚入门的程序员，还是年薪百万的 BATJ 的大牛都无可否认：Python的应用能力是成为一名码农大神的必要项。 所以，很多程序员把Python当做第一语言来学习。 但对于Python…
python的zip函数
zip()函数 它是Python的内建函数，(与序列有关的内建函数有：sorted()、reversed()、enumerate()、zip()),其中sorted()和zip()返回一个序列(列表)对象，reversed()、enumerate()返回一个迭代器(类似序列) 1 >>> type(sorted(s)) 2 <…
Nginx 搭建负载均衡
1.其实我这里并不是访问量很大，主要用于版本升级和维护而搭建的 2.忽略nginx安装和jetty的安装配置，我是在一台Linux服务器上装了两个jetty服务，部署两套jetty服务很简单，其实改改jetty.sh 脚本即可 JETTY_HOME/opt/jetty2/ JETT…
巧用CSS的Glow滤镜
作者：冯永曜对一个对象使用“glow”滤镜后，这个对象的边缘就会产生类似发光的效果，这种效果在PHTOSHOP中做起来都比较麻烦，而在DW3中用CSS的“glow”滤镜来制作却是如此地简单，而且节约不少字节。“glow”滤镜只有两个…
10大经典排序算法，20+张图就搞定
作者 | 李肖遥来源 | 技术让梦想更伟大冒泡排序简介冒泡排序是因为越小的元素会经由交换以升序或降序的方式慢慢浮到数列的顶端，就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名冒泡排序。复杂度与稳定性思路原理以顺序为例从第一个元素开始一…
C# MoreLinq 扩展安装
为什么80%的码农都做不了架构师？>>> http://blog.csdn.net/lee576/article/details/42716905 MoreLinq是一个对Linq to object的扩展类库,它是一个开源项目(http://code.google.com/p/morelinq/source/browse 天朝已对google全力封禁,所以要翻墙)&#…
IOS学习博客不错的大部分是原创
http://blog.csdn.net/iukey/article/category/955062
巧用CSS的Light滤镜
作者： 冯永曜Light滤镜能产生一个模拟光源的效果，但使用它要通过调用它的“方法（Method）”来实现，这就要用到一些Javascrpt知识，虽然有一点难度，但产生的效果也是奇特的，你看看下面的…
没有场景，不做单点技术输出，360数科如何做金融科技的最佳实践？
作者 | Just 出品 | AI科技大本营（ID:rgznai100） 从互联网金融公司转变为金融科技公司，品牌升级后的360数科强化了“科技”的外衣。 在近期的首个360数科技术开放日，360数科CEO吴海生表示，他们已经做好金融科技的最佳…
react构建淘票票webapp，及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面，并写了一篇相关文章vue2.0构建淘票票webapp，得到了很多童鞋的支持，因此这些天又使用react重构了下这个项目，目的无他，只为了学习和共同进步！ 项目技术栈 前端技术…
【机器学习】机器学习算法优缺点对比（汇总篇）
作者 | 杜博亚来源 | 阿泽的学习笔记「本文的目的，是务实、简洁地盘点一番当前机器学习算法」。文中内容结合了个人在查阅资料过程中收集到的前人总结，同时添加了部分自身总结，在这里，依据实际使用中的经验，将对此模型…
PLSQL developer 连接不上64位Oracle 解决办法
在64位Windows2003上安装Oracle后，用PLSQL developer去连接数据库出现报错： Could not load "……\bin\oci.dll" OCIDLL forced to…… LoadLibrary（……oci.dll） returned 0 原因： oci.dll是64位的…
Docker 使用教程
概括 Docker与传统虚拟机的区别 与传统虚拟机的区别 Docker的安装 的安装 Docker daemon ， client ， containerd 镜像与容器操作 容器运行配置 Docker网络配置 网络配置 Alpine Docker Image 制作自己的 Docker Image …
话说CSS滤镜
作者：http://www.swtv.com.cn/adjunct/nr/css/css.htmAlpha 透明层次：滤镜效果语法：STYLE"filter:filtername(parameter1,parameter2,parameter3...)"其中：filtername为滤镜的名称；parameter1,parameter2等为…
面向隐私AI的TensorFlow深度定制化实践
作者 | Rosetta团队出品 | AI科技大本营（ID:rgznai100）之前我们整体上介绍了基于深度学习框架开发隐私 AI 框架中的工程挑战和可行解决方案。在这一篇文章中，我们进一步结合 Rosetta 介绍如何定制化改造 TensorFlow 中前后端相关组件…
”拿来搞笑“的大学生活
”拿来搞笑“这词，是我舍友对我说过好几遍，我才觉得这词用来形容我大学的生活再恰当不过了，感谢他送给我这个词。 下面就列一下我大学期间”拿来搞笑“的事情： —：无偿捐血400毫升。当时认为是一件微不足道的事情&…
巧用CSS的Border属性
。作者：冯永曜 来源：黄山村夫 制作过网页的人都有为画线而烦恼的经历，本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标…
阿里资深算法专家：如何突围大厂算法面试？
2020 届秋招，算法岗灰飞烟灭。最聪明的应届生 / 程序员 ，都在极度竞争中，面临着前所未有的激烈 PK 。学生因“内卷”而迷茫；初级程序员遇职业发展瓶颈而困惑...面对重重压力，苦不堪言。to do list 上写满计划ÿ…
乡下人最嘲笑城里人的16件事，无语了！
一、出门「taxi」，乘电梯上七楼的健身房，然后在跑步机上挥汗如雨。 二、半夜上网，去歌厅、舞厅，困了不睡觉。之后失眠，再吃安眠药。 三、管儿子叫「小兔崽子」，管宠物狗叫儿子。 四、挑最有特色的饭店吃…
2017浅谈面试（一）
2017给自己一个目标，制定一份计划，新的开始，跟随创业团队风险无处不在，不过还是要选好Boss。 2016一个煎熬，悲剧，没发工资的日子，一等就等了5个月，零散的就拿到了一个半月工资&#…
乘风破浪的PTM：两年来预训练模型的技术进展
作者 | 张俊林来源 | 深度学习前沿笔记专栏Bert模型自18年10月推出，到目前为止快两年了。它卜一问世即引起轰动，之后，各种改进版本的预训练模型（Pre-Training Model, PTM）与应用如过江之鲫，层出不穷。Bert及…
DW中CSS属性详解
作者：未知 来源：5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver把这些属性分为Type（类型）、Background（背景）、Block（块）、Box&a…
第十周项目5：贪心的富翁
上机内容：用循环语句完成累加 上机目的：学会循环语句的使用 /* * Copyright (c) 2012, 烟台大学计算机学院 * All rights reserved. * 作 者：孙锐 * 完成日期：2012 年 10 月 31 日 * 版 本 号&…
python requests返回的json对象用json.loads()时转为字典时编码变为了unicode
2019独角兽企业重金招聘Python工程师标准>>> 1.使用simplejson，loads的对象为str，否则还是会转码unicode import simplejson url "" payload {} headers {} r requests.post(url, datapayload, headersheaders)result simplej…
关于Dreamweaver乱码问题的解决方案
原作者：南宫彩虹出处：5D多媒体出现乱码，大致为两种情况： 一是没有标明主页制作所用的文字，这种情况下很简单就可以解决，在<HEAD>区加上<META http-equivContent-Type content"text/html; cha…
百度绝对控股，小度科技独立融资，投后估值200亿元
9月30日，百度宣布旗下智能生活事业群组业务（以下简称“小度科技”）完成了独立融资协议的签署，本轮融资由百度资本及CPE战略领投、IDG资本跟投，投后估值达约200亿元。作为百度的重要战略业务板块，百度公司对…
Android UI开发第二十五篇——分享一篇自定义的 Action Bar
Action Bar是android3.0以后才引入的，主要是替代3.0以前的menu和tittle bar。在3.0之前是不能使用Action Bar功能的。这里引入了自定义的Action Bar，自定义Action bar也不是完全实现了 Action bar功能，只是在外形上相似。自定义Action bar没有…
ADF12C 在线预览PDF文件 afinlineFrame
转载于:https://blog.51cto.com/feitai/1898433
批量消除虚线框
原作者：星之海洋出处：5D多媒体 各位想必都知道，οnfοcus”this.blur()”这条代码能消除链接时的虚线框，但你有没有想过，如果你的网页上有几个甚至上百个链接，而你又想要去掉上面那些讨厌的虚线框…