免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

巧用CSS的MASK滤镜

fanleung 于 2018-01-18 08:01:28 创建话题
(3)
(0)
举报
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看看,是不是有点酷?!
扫码关注TE官方微博 扫码关注TE官方微博
ASP.NET存储过程实现分页效果(三层架构) 动态加载jquery库的方法 swift 3.0中realm封装类示例代码 dedecms文章页上一篇与下一篇标题长度截取的方法 iOS学习笔记之远程推送、静默推送与自定义消息推送 JSP 中response.setContentType()的作用及参数 PHP网页游戏学习之Xnova(ogame)源码解读(十) C# 获取当前星期几三种实现方法 ASP.NET中DataTable与DataSet之间的转换示例 Bootstrap表单布局样式代码 Python的消息队列包SnakeMQ使用初探 vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用 Javascript监视变量变化的方法 解决JSP开发中Web程序显示中文三种方法 JS实现页面数据无限加载 详细解读分布式锁原理及三种实现方式 简单学习Python多进程Multiprocessing 修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法 JS.elementGetStyle(element, style)应用示例 .NET事件监听机制的局限与扩展分析 python实现百度语音识别api 在NodeJS中启用ECMAScript 6小结(windos以及Linux) jQuery Timelinr实现垂直水平时间轴插件(附源码下载) 提高ASP页面执行效率的方法分析 Android GridView实现横向列表水平滚动 深入解析Session是否必须依赖Cookie Python入门及进阶笔记 Python 内置函数小结 JS解析XML实例分析 Javascript生成全局唯一标识符(GUID,UUID)的方法 BootStrap的select2既可以查询又可以输入的实现代码 PHP取余函数介绍MOD(x,y)与x%y 如何给span标记的样式设置width属性 最全的用正则批量去除Teleport Pro整站下载文件冗余代码 js判断空对象的实例(超简单) node.js抓取并分析网页内容有无特殊内容的js文件 js中根据字数截取字符串,不能截断url 可以文本显示的公告栏的js代码 Vue.js实战之通过监听滚动事件实现动态锚点 li中插入img图片间有空隙的解决方案 css3 条纹化和透明化表格Firefox下测试成功 ThinkPHP基于PHPExcel导入Excel文件的方法 将数字转换成大写的人民币表达式的js函数 JavaScript CSS 修改学习第四章 透明度设置 jQuery 鼠标经过(hover)事件的延时处理示例 应该如何构造复杂的正则表达式 AngularJS 使用$sce控制代码安全检查 python读取和保存图片5种方法对比 用Docker安装Gitlab的方法步骤 PHP使用trim函数去除字符串左右空格及特殊字符实例 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP Angularjs 与 bower安装和使用详解 python批量同步web服务器代码核心程序 解决因文件权限导致git fetch命令执行失败的问题 MySQL主库binlog(master-log)与从库relay-log关系代码详解 js正则表达式匹配数字字母下划线等 js和jquery中获取非行间样式 vue中使用gojs_jointjs的示例代码 JavaBean实现多文件上传的两种方法 ASP.NET中FileUpload文件上传控件应用实例 canvas轨迹回放功能实现 Python 中 list 的各项操作技巧 CentOS7 64位安装mysql图文教程 浅谈Python爬取网页的编码处理 Java和scala实现 Spark RDD转换成DataFrame的两种方法小结 Ubuntu上使用Fcitx安装中文输入法的简单方法 AngularJs bootstrap搭载前台框架——js控制部分 Javascript for in的缺陷总结 Linux不能上网ping unknown host出错该怎么办? js实现仿QQ秀换装效果的方法 html页面显示年月日时分秒和星期几的两种方式 使用正则限制input框只能输入数字_英文_中文等等 jquery中push()的用法(数组添加元素) 利用Redis统计网站在线活跃用户的方法 Android 通过Intent调用系统拍照程序出现图片太小的问题解决办法 jQuery预加载图片常用方法 创力采集程序用到的函数 推荐第1_3页 关于jquery动态增减控件的一些想法和小插件 destoon复制新模块的方法 Android开发中TextView文本过长滚动显示实现方法分析 jquery实现左右滑动式轮播图 jQuery 学习第七课 扩展jQuery的功能 插件开发 关于Linux系统,你可能还不知道的七件事 xcode8提交ipa失败无法构建版本问题的解决方案 wordpress 为主题添加AJAX提交评论功能的php代码 CSS兼容要点分析 基于javascript实现页面加载loading效果 YII路径的用法总结 Ajax无刷新Url提交页面 iOS三级联动选择器的实现代码示例 JavaScript自定义数组排序方法 为大家详细介绍25个Linux 服务器安全小技巧 PHP使用流包装器实现WebShell的方法 史上最全JavaScript常用的简写技巧(推荐) 利用jquery的获取JS文件中的字符串内容 Python聊天室程序(基础版) ubuntu17.4下为python和python3装上pip的方法 ASP Recordset 分页显示数据的方法(修正版) PHP里面把16进制的图片数据显示在html的img标签上(实现方法) JS使用for循环遍历Table的所有单元格内容 ASP.NET中RadioButtonList绑定后台数据后触发点击事件 curl 出现错误的调试方法(必看) JS实现的验证身份证及获取地区功能示例 拥Bootstrap入怀——导航栏篇 JavaScript截取字符串的Slice、Substring、Substr函数详解和比较 在vue-cli脚手架中配置一个vue-router前端路由 IBM DB2 日常维护汇总(一) python3实现163邮箱SMTP发送邮件 用Python编写简单的微博爬虫 如何优化SQL语句的心得浅谈 php微信浏览器分享设置以及回调详解 Yii使用DeleteAll连表删除出现报错问题的解决方法 基于Bootstrap的网页设计实例 JavaScript中在光标处插入添加文本标签节点的详细方法 jQuery Autocomplete简介_动力节点Java学院整理 Group容器 Mac计算器快捷键是什么?苹果Mac电脑科学计算器设置步骤 mac os x10.10wifi连接特别慢几分钟后自自行断开 JavaScript中几种常见排序算法小结 仅9张思维导图帮你轻松学习Javascript 就这么简单 js 操作select与option(示例讲解) JavaScript实现时钟滴答声效果 深入剖析CSS变形transform(3d) python实现指定文件夹下的指定文件移动到指定位置 详解ASP.NET WEB API 之属性路由 iOS+PHP注册登录系统 iOS部分(下) BootStrap+Mybatis框架下实现表单提交数据重复验证 详解ASP.NET Core 2.0 路由引擎之网址生成(译) CSS理解块级格式上下文(BFC) SQL触发器实例讲解 JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析 JSP学习心得 javascript的replace方法结合正则使用实例总结 jquery实现人性化的有选择性禁用鼠标右键 CentOS 7 安装vsftpd 服务器的具体操作步骤 Python图片转换成矩阵,矩阵数据转换成图片的实例 详解JavaScript中js对象与JSON格式字符串的相互转换 Python常见加密模块用法分析【MD5,sha,crypt模块】 JQ获取动态加载的图片大小的正确方法分享 一道JS前端闭包面试题解析 在ASP.NET 2.0中操作数据之五十二:使用FileUpload上传文件 asp.net 删除MFC单文档默认菜单栏的两种方法 jsp页面传参乱码的解决方法 dedecms页面获取会员状态的方法 CentOS(x86_64)下PHP安装memcache扩展问题解决方法分享 JavaScript整除运算函数ceil和floor的区别分析 Mysql 5.7.17 解压版(ZIP版)安装步骤详解 javascript常用代码段搜集 详解Spring Boot下Druid连接池的使用配置分析 JSP由浅入深(3)—— 通过表达式增加动态内容 用Python将IP地址在整型和字符串之间轻松转换 文本有关的样式和jQuery求对象的高宽问题分别说明 CentOS系统下如何设置mysql每天自动备份 Bootstrap CSS布局之按钮 Postgresql ALTER语句常用操作小结 canvas实现粒子时钟效果 在Linux系统上使用转发服务器处理邮件通信的教程 Node.js使用gm拼装sprite图片 SQL Server 2005降级到2000的正确操作步骤分享 MVC 5 第一章 创建MVC 5 web应用程序 AngularJS的$location使用方法详解 细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果 基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息 Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法 图片在浏览器中底部对齐 解决方法之一 sql中 order by 和 group by的区别 ASP.NET MVC4之js css文件合并功能(3) 基于session_unset与session_destroy的区别详解 再谈IE中Flash控件的自动激活 ObjectWrap MySQL创建带特殊字符的数据库名称方法示例 突破一流拦截 上传限制的方法 Zend Guard使用指南及问题处理 php中socket的用法详解 AngularJS基础 ng-mouseenter 指令示例代码 基于jquery的让textarea自适应高度的插件 微信公众号 摇一摇周边功能开发 webpack学习教程之publicPath路径问题详解 js静态方法与实例方法分析 jQuery实现在最后一个元素之前插入新元素的方法 PHP钩子与简单分发方式实例分析 Java输入输出流实例详解 给Android初学者的Gradle知识普及 mysql中url时区的陷阱该如何规避详解 AngularJS使用ng-repeat指令实现下拉框 Mac文本编辑关闭如何自动保存功能 Mac文本编辑关闭自动保存功能使用介绍 jQuery的观察者模式详解 在Linux系统中使用蓝牙功能的基本方法 揭晓最差密码排行榜 教你设置安全密码的小技巧 JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题 jQuery标签替换函数replaceWith()的使用例子 zepto与jquery的区别及zepto的不同使用8条小结 JS实现字符串中去除指定子字符串方法分析 在Windows服务器上启用TLS 1.2及TLS 1.2基本原理介绍 EditPlus中的正则表达式 实战(2) 让Laravel API永远返回JSON格式响应的方法示例 js 距离某一时间点时间是多少实现代码 js跨域访问示例(客户端_服务端) vue-cli常用设置总结 探索angularjs+requirejs全面实现按需加载的套路 js闭包学习心得总结 php smtp实现发送邮件功能
CSS3实现3D立方体旋转动画特效.zip Spring3,Hibernate4,Spring mvc3通用后台管理系统 Discuz! x2.5自然清新模板.zip 旋转木马切换特效slick.zip Revealing图片展示效果(jQuery).zip jquery鼠标点击自定义下拉框插件.zip 【ASP.NET源码】铁力Tieli.net多用户留言本v1.1_tieligbookv1.1.zip 仿拍鞋网商城html5手机模板 jQuery全屏日历插件.zip 纯CSS3实现自行车动画.zip 铁艺工艺品网站模板.zip 【PHP源码】XECMS 0.2 多国语言版_xecms.zip DJ音乐俱乐部网站模板.zip Struts+Hibernate+Mysql 网上书城系统 圣亚罗手表广告模板下载.zip SSH整合实例(struts2,hibernate4,spring3) Jsp企业快信(短信猫+Java邮件) jQuery Loading遮罩加载特效.zip 仿QQ侧滑菜单 简洁flash图片轮换广告代码.zip struts2+hibernate+spring框架搭建 微信小程序 - 题库.zip jQuery图片选中突出标签幻灯片代码.zip jQuery两组图片滑块展示.zip jQuery自适应父容器宽度高度特效.zip Legend单页面HTML5模板.zip CSS3+jQuery模拟Windows Phone7 UI.zip jQuery右键菜单插件context.js.zip 【PHP源码】Vsay.Com谣言系统_vsayyy.zip DrupalCMS blix.zip redis可视化工具,RedisClient-master 【PHP源码】Sphider-plus (带蜘蛛搜索引擎程序) v1.5_sphider.zip HTML5室内装饰公司网站模板.zip 纯CSS3左右滑动开关按钮.zip CSS3小球循环转圈加载特效.zip Java实现坦克大战小游戏 jquery可定制高度画廊.zip 微信小程序 - 记账统计.zip 红色商务外贸企业公司模板.zip jQuery手机端省市区三级联动代码.zip jQuery显示字幕插件Captall.zip 一款超棒的bootstrap管理风格的模板 现代简洁CSS3模板.zip css3透明滑动手风琴.zip 蓝色互联网科技企业网站模板.zip jq横向滑动排版效果.zip Jsp企业电子商城 Canvas制作双环碰撞动画效果.zip jquery大图左右按钮点击切换.zip 12款CSS3汉堡包按钮变形动画特效.zip 谷歌NEXUS网站菜单.zip 纯CSS3仿窗帘拉开关闭动画特效.zip 域名主机企业网站模板.zip 视差滚动parallax插件.zip HTML5 3D立方体旋转动画.zip Loading网页加载进度条动画效果.zip 仿艺体舞蹈培训手机wap培训网站模板.zip 【ASP.NET源码】网博留言版 v1.0_wbbook10.zip jquery手动自动图片切换.zip 带动画效果CSS3手风琴菜单.zip js+html5实现简易指针时钟表代码.zip jQuery网格视图图片画廊.zip 美丽花朵html模板下载.zip 【ASP.NET源码】自助友情链接系统 v1.0_zzlink10.zip 读书的少女HTML5网站模板.zip jQuery图片弹出翻转特效代码.zip html5情人节爱心背景特效.zip 【ASP.NET源码】海纳论坛SeaBBS v1.1.0简体中文版_seabbs110.zip 互动广告公司html模板.zip 旋转木马切换特效slick.zip PHP redis 拓展 仿淘宝UI安卓模版 jQuery文字上下滑动切换代码.zip jquery图片滑动排列.zip ShowcaseView-master界面初次引导 一个关于JSP+servlet+Mysql的企业电子商城项目 基于Java、mysql毕设网吧管理系统 jQuery免费午餐首页焦点图.zip INSPINIA 基于Bootstrap的后台主题UI框架 中文汉化 模板 CSS3动态数字翻转切换动画特效.zip javaweb当当网实现 jQuery UI分页滑块.zip 美国白宫建筑网站模板.zip jQuery半透明注册表单.zip jquery带标题水平手风琴切换.zip div+css3阶梯分页样式.zip 简单的网络图书商店系统(没有使用框架) Struts2+Spring2.5+Hibernate3+Freemarker 框架整合 绿色花园CSS网页模板.zip Discuz! x2经典水风格模板.zip wordpress博客主题Blogo.zip [Android项目源码] 基于android系统的个人记账软件 微信系统分离出的微网站模板手机网站模板(单页).zip IT公司网站CSS3模板.zip 英语培训教育公司整站模板.zip jQ AJAX文件上传表单.zip 手机触屏滑动图片切换插件swiper.js.zip 基于H5+js+ajax+java的个人空间的实现 高仿微信语音录制 Mac OS X桌面菜单jQuery.zip CSS3音阶波浪Loading加载代码.zip 微信小程序源码-图书馆写笔记(含后端) jQuery星星评分插件.zip 简单js日期三级联动下拉代码.zip 微信小程序源码-五十音图 Struts2+Spring+Hibernate+Jsp+Mysql5 项目申报系统 【PHP源码】PHP动画Flash程序源代码版[BBWPS] v2.1 Build 071113_bbwps_flash.zip 红色喜庆商务公司网站模板.zip jQuery拉手网城市切换导航栏.zip jQuery商城商品参数对比筛选代码.zip js智能缩放点击图片放大预览代码.zip 韩国料理美食网站模板.zip 地方旅游景点HTML5模板.zip jQuery投资理财计算器代码.zip jQuery无限加载瀑布流.zip 【PHP源码】PHPOK企业建站程序 v2.2_phpok2.2.zip html5 canvas燃烧的火焰文字特效.zip jQuery实现网易邮箱页面.zip jQuery火箭图标返回顶部代码.zip wp独具风格geekust主题.zip 环球旅游CSS网页模板.zip jQuery鼠标滑过显示在线客服.zip js带缩略图多组图片相册切换.zip jsp+struts+hibernate+oracle 通用的在线考试系统 8屏轮播切换jquery焦点图.zip 乒乓球俱乐部网站模版.zip 纸一样展开jQuery特效.zip 【ASP.NET源码】HiShop网店代理分销系统 v5.2 Beta 2_hishop.5.2.beta2.zip 【PHP源码】O-Blog v2.5 Beta Build0812 繁体中文版_oblog0812big5.zip jquery剥开网站页面特效.zip jQuery可视化在线绘图工具代码.zip css3实现Metro风格.zip jquery动态星星评分插件.zip jQuery+CSS3扁平消息通知.zip jQuery图片滑动旋转切换.zip jQuery+PHP头像上传预览代码.zip CSS3鼠标滑过按钮背景动画特效.zip jsp论坛源码 大旗时尚flash+xml焦点图代码.zip tab产品标签选项卡.zip 【PHP源码】PBDigg v1.0 正式版 Build20071205_pbdigg_1_0_0_build20071205.zip 微信小程序 - 命悬一线.zip jQuery纵向柱状体样式投票代码.zip 弹性ScrollView和悬浮头 Spring3.0+Hibernate4.0+SpringMVC整合ExtJS4 6.cn首页banner可关闭广告.zip jQuery鼠标悬停图片滑动切换.zip 安全狗网站jQuery焦点图.zip jQuery分割线拖拽照片前后对比.zip js图片标题随小圆点放大切换.zip 五星级酒店集团网站模板.zip 绿色教育学校网站整站模板.zip 带缩略图切换的jQuery相册特效.zip jquery展开收缩手风琴菜单.zip 纯JS仿FLASH图片轮换播放.zip jQuery带按钮向上滚动向下滚动代码.zip 纯CSS3实现3D波浪形动画.zip 户外休闲驴行登山网站模板.zip jquery变色动画下拉菜单.zip Oracle数据库高可用视频教程 7.84G 橙色视差滚动设计公司模板.zip css3+html5彩色表单.zip 巴黎时装秀购物网站模板.zip jquery带注释交互式照片.zip 微信小程序源码-爱卡汽车 UI插画设计师html5模板.zip 【PHP源码】SupeSite 7.0 繁体中文 UTF-8 Build 20090422_supesite7.0_tc_utf8.zip Java Servlet 开发 B2C 购物商城源代码下载 JSP Explorer 文件浏览器 v1.0 css3实现动画按钮.zip Nginx零基础系列视频教程 加载新闻并调用API jQuery带文字动画图片轮播代码.zip 花纹婚纱PSD模板下载.zip 微信小程序源码-物业管理 HTML5+CSS3悬浮按钮彩球效果.zip 使用IntelliJ IDEA开发基于Maven+Spring MVC的入门Java项目 【ASP.NET源码】好22网络TOM新闻小偷 v1.0_ok22x.zip 【PHP源码】zvchat 2.1.3 Release_zvchat.zip 基于web开发的图书管理系统 js不同设备过渡切换效果.zip 粉红色婚纱摄影网站模板.zip jQuery+CSS3内容变换焦点广告.zip jQuery分页动画效果.zip 精美后台UI框架整站模板.zip 微信小程序源码-省市选择控件 大屏幻灯片HTML网站模板.zip 【PHP源码】谷搜Linux邮件群发系统 v1.1_linux-sendmail.zip 微信小程序源码-滴滴打卡 spring3、struts2、mybatis结合的一个简单web实现 【ASP.NET源码】EnjooSite CMS&BLOG 快乐建站 v2009_enjoosite2009.zip 计算机编程科技公司模板.zip jQuery扑克牌切换焦点图代码.zip 响应速度快的jQuery Lightbox插件.zip css3实现底部阴影按钮.zip iPhone通讯录首字母检索特效.zip jplayer歌词同步音乐播放器.zip jQuery点击图标按钮浮动展开.zip old boy-高级架构师 01、zabbix深度实践-13节 钢铁制造业公司网站模板.zip
举报X