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

巧用CSS的MASK滤镜

fanleung 于 2018-01-18 08:01:28 创建话题
(33)
(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官方微博
JSP 多条SQL语句同时执行的方法 JScript实现地址选择功能 springboot+springmvc+mybatis项目整合 javascript用正则表达式过滤空格的实现代码 Angular的事件和表单详解 Django 中使用流响应处理视频的方法 JavaScript的代码编写格式规范指南 Asp.Net中的字符串和HTML十进制编码转换实现代码 ThinkPHP实现图片上传操作的方法详解 JavaScript解析任意形式的json树型结构展示 php+webSoket实现聊天室示例代码(附源码) CentOS下telnet退出失败如何解决?CentOS下telnet退出失败的解决方法 vue项目中vue-i18n和element-ui国际化开发实现过程 javascript实现简单的Map示例介绍 Ajax的jsonp方式跨域获取数据的简单实例 php session_start()出错原因分析及解决方法 Laravel学习教程之request validation的编写 struts2 spring整合fieldError问题 Three.js利用顶点绘制立方体的方法详解 gif图片分解与重新编辑的工具及方法 java Socket实现多人群聊与私聊功能 情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript) Mac电脑finder是什么意思 Mac Finder的10个使用技巧 javascript数据结构之串的概念与用法分析 Mysql 下中文乱码的问题解决方法总结 从0开始学Vue javascript设计模式之对象工厂函数与构造函数详解 JavaScript比较两个对象是否相等的方法 解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1 3306的问题 CentOS下对临时文件的操作之mkstemp讲解 python交互式图形编程实例(一) vue loadmore 组件滑动加载更多源码解析 Selenium(Python web测试工具)基本用法详解 js鼠标滑过弹出层的定位IE6bug解决办法 mysql的存储过程、游标 、事务实例详解 点击页面其它地方隐藏该div的两种思路 PHP入门教程之表单与验证实例详解 font和line-height之CSS代码书写顺序不同,导致显示效果不一样 css中的行间距的代码 一道优雅面试题分析js中fn()和return fn()的区别 javascript 有用的脚本函数 总结SQL执行进展优化方法 在Html中使用Requirejs进行模块化开发实例详解 MongoDB入门教程之Windows下的MongoDB数据库安装图解 AngularJs bootstrap搭载前台框架——基础页面 甩掉ashx和asmx使用jQuery.ajaxWebService请求WebMethod简练处理Ajax PHPCMS V9 定时发布文章的实现方法 sql server Bulk Insert命令详细 jquery属性选择器not has怎么写 行悬停高亮显示 微信小程序 转发功能的实现 shell脚本编程之case语句学习笔记 使用jquery实现图文切换效果另加特效 解决html input验证只能输入数字,不能输入其他的问题 jquery马赛克拼接翻转效果代码分享 对比分析AngularJS中的$http.post与jQuery.post的区别 PHP实现的增强性mhash函数 Squid使用方法详解 JavaScript高级程序设计 阅读笔记(十三) js定义类或对象 Mysql中的NULL和Empty String 苹果Mac OSX卡慢?八招帮你轻松提速 js获取客户端网卡的IP地址、MAC地址 jQuery scrollFix滚动定位插件 PHP验证码类文件及调用方式代码详解 以一个投票程序的实例来讲解Python的Django框架使用 两个select多选模式的选项相互移动(示例代码) destoon安全设置中需要设置可写权限的目录及文件 一步步教会你微信小程序的登录鉴权 Discuz! 积分策略向导功能详解 如何查看SQLSERVER中某个查询用了多少TempDB空间 html5+css3气泡组件的实现 php 数组元素快速去重 ASP数据库编程SQL常用技巧 Python使用functools实现注解同步方法 js通过iframe加载外部网页的实现代码 vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法 python框架django基础指南 javascript实现简易计算器 jquery ajax同步异步的执行最终解决方案 php数组相加 array(“a”)+array(“b”)结果还是array(“a”) SQL重复记录查询的几种方法 Vue二次封装axios为插件使用详解 mongodb分片技术_动力节点Java学院整理 PHP 年龄计算函数(精确到天) 使用js显示当前时间示例 Javascript操作dom对象之select全面解析 浅谈JavaScript中的apply_call_bind和this的使用 input点击后placeholder中的提示消息消失 解析php中两种缩放图片的函数,为图片添加水印 js判断checkbox是否选中个数的方法(超简单) 全面解析Oracle Procedure 基本语法 使用js获取地址栏中传递的值 PHP使用zlib扩展实现GZIP压缩输出的方法详解 原生javascript 学习之js变量全面了解 Nodejs使用mysql模块之获得更新和删除影响的行数的方法 setTimeout 不断吐食CPU的问题分析 必须会的SQL语句(八) 数据库的完整性约束 基于原生js运动方式关键点的总结(推荐) JavaScript简单验证表单空值及邮箱格式的方法 Web开发之JavaScript vue+axios实现登录拦截的实例代码 HTML5 解决苹果手机不能自动播放音乐问题 Mac Mysql数据库中文乱码问题解决 JavaScript必知必会(九)function 说起 闭包问题 ASP.net WebAPI跨域调用问题的解决方法 javascript 词法作用域和闭包分析说明 javascript实现日期时间动态显示示例代码 DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP UBB解析)打包下载 js焦点文字滚动效果代码分享 jQuery实现广告条滚动效果 javascript cookie的基本操作(添加和删除) SQL里面用自定义Split()完成个性化需求 ASX文件 终极教程第1_2页 AngularJS入门教程之学习环境搭建 python定时利用QQ邮件发送天气预报的实例 jQuery 动态酷效果实现总结 python将每个单词按空格分开并保存到文件中 js导出Excel表格超出26位英文字符的解决方法ES6 JSP 开发中过滤器filter设置编码格式的实现方法 jQ处理xml文件和xml字符串的方法(详解) jquery移动点击的项目到列表最顶端的方法 JavaScript设置body高度为浏览器高度的方法 vue事件修饰符和按键修饰符用法总结 使用Promise解决多层异步调用的简单学习心得 使用jquery实现简单的ajax div模拟textarea文本域实现高度自适应效果代码 与虚拟机Oracle连接出现ora-12154问题的解决方法 JavaScript模版引擎的基本实现方法浅析 JavaScipt中栈的实现方法 c# 连接字符串数据库服务器端口号 .net状态服务器端口号 实例介绍PHP的Reflection反射机制 jQuery中多个元素的Hover事件解决方案 js Function类型 iOS开发教程之XLForm的基本使用方法 JS实现统计字符串中字符出现个数及最大个数功能示例 利用nginx与ffmpeg搭建流媒体服务器过程详解 js简单判断移动端系统的方法 详解HTTP状态码 浅谈js中startsWith 函数不能在任何浏览器兼容的问题 Windows server 2008搭建php运行环境图文详解(php5.3) JS实现点击复选框将按钮或文本框变为灰色不可用的方法 jQuery 获取多选框的值及多选框中文的函数 虚拟主机实现泛域名解析的实现方法 利用CSS3在Angular中实现动画 Java File类的常用方法总结 js 延迟加载 改变JS的位置加快网页加载速度 基于JS如何实现给字符加千分符(65,541,694,158) shell脚本实现的网站日志分析统计(可以统计9种数据) ES6_JavaScript使用技巧分享 JS使用cookie设置样式的方法 CSS的一些编程规范总结 jQuery AJAX timeout 超时问题详解 PHP十六进制颜色随机生成器功能示例 浅谈正则表达式 实例入门 AngularJS中的JSONP实例解析 Mac无法连接到App Store并提示需要连接网络怎么办? javascript打印大全(打印页面设置_打印预览代码) json对象转为字符串,当做参数传递时加密解密的实现方法 javascript简单判断输入内容是否合法的方法 PHP7.1方括号数组符号多值复制及指定键值赋值用法分析 Python中functools模块函数解析 AngularJS的$location使用方法详解 Python中用函数作为返回值和实现闭包的教程 微信小程序城市定位的实现实例(获取当前所在国家城市信息) mybatis+mysql 使用存储过程生成流水号的实现代码 ThinkPHP框架实现数据增删改 dedecms广告生成JS文件和JS调用-DEDE广告优化 iOS中使用RSA加密详解 jquery动态导航插件dynamicNav用法实例分析 详解使用python的logging模块在stdout输出的两种方法 AngularJS实现的省市二级联动功能示例【可对选项实现增删】 CentOS搭建PHP服务器环境简明教程 教你如何使用VS远程调试 js组件SlotMachine实现图片切换效果制作抽奖系统 苹果macOS Sierra正式版更新内容汇总 layer实现弹窗提交信息 css display none使用注意事项小结 JavaScript 仿关机效果的图片层 PHP实现加密文本文件并限制特定页面的存取的效果 在 Swift 中测试 UIAlertController的方法 利用CSS3实现文本框的清除按钮相关的一些效果 css html布局之display属性_动力节点Java学院整理 Django入门使用示例 Mysql语法、特殊符号及正则表达式的使用详解 python将人民币转换大写的脚本代码 PHP序列号生成函数和字符串替换函数代码 AngularJs实现ng1.3+表单验证 php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转) JS实现的点击表头排序功能示例 Python读写Redis数据库操作示例 Flutter进阶之实现动画效果(六) centos6.4安装CloudStack 4.2(开源云计算平台)详解 php缩放gif和png图透明背景变成黑色的解决方法 asp文件用什么软件编辑 javascript实现二叉树遍历的代码 详细介绍kvm虚拟机静态和动态迁移(图文介绍) 一个ASP创建动态对象的工厂类(类似PHP的stdClass) 天翼开放平台免费短信验证码接口使用实例 php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法 ExtJS Window 最小化的一种方法 Android学习之本地广播使用方法详解
微信小程序源码-辣椒忍者 jQuery节假日高亮显示万年历.zip 质感UI博客HTML5模板.zip jQuery颜色选择器插件.zip HTML5 SVG实现过山车动画.zip 帝国cms豆瓣绿色清爽模板.zip jQuery炫酷鼠标滑过图片显示遮罩层特效.zip 【PHP源码】phpwebsite 1.6.2_phpwebsite_1_6_2.zip 橙色简洁CSS模板.zip 新闻博客CSS网页模板.zip 微信小程序源码-酒类商城 JSP科技企业信息管理系统[Eclipse]版 木材加工行业网站模板.zip 哈工大javaee大作业,学生信息管理系统,SSH框架 微信小程序源码-音乐在线歌词搜索 【ASP.NET源码】紫罗兰企业网站_companypublicok.zip CSS3用户登录注册翻转式切换代码.zip jquery苹果解锁滑块幻灯片.zip 【PHP源码】Boast Machine v3.1 多国语言版_bmachine-3.1.zip SSM个人博客项目实战(SSM+EasyUI) 粉红色浪漫婚纱企业模板.zip jQuery汽车车速表效果.zip jQuery手机端左右滑动切换表单代码.zip 带缩略图的JS图片轮换.zip jquery自定义添加标签.zip jQ+CSS3滑块导航菜单.zip 【PHP源码】XpressEngine(Zeroboard XE) v1.2.4 多国语言版_xe_full.zip CSS3实现仿360错误提示页面代码.zip 黑色质感服务器网站模板.zip 【PHP源码】Friends!婚恋交友系统 v2.6_friends.zip jquery+css3实现元素颤抖特效.zip jQ悬浮滑动显示全图.zip div+css开发28套通用网站后台管理系统模板源码分享 jQuery+HTML5实现滑块特效下载.zip jQuery+CSS3模拟Mac OS界面.zip 微信小程序源码-美食菜谱 jQuery+CSS3绘制网页日历.zip jQuery滑动解锁登录表单代码.zip 【PHP源码】PHP分类信息系统PHPMPS 1.2 GBK Bulid 090305_phpmps.zip 慈善机构HTML网站模板.zip WalletFun海外支付SDK jquery+html5自适应网站焦点图.zip jquery标签筛选联动选中.zip Vue.js 2.0 + Element UI实现后台管理系统 jquery个性化网站侧边栏工具条.zip jQuery左侧人员添加到右侧联系人.zip css文本底部淡入淡出效果.zip Spring MVC 整合Mybatis详解,SSM框架的配置搭建,涉及Mybatis一对多的插入和查询,同时也涉及到一些简单的文件上传和下载 checkbox单选复选按钮美化代码.zip jsp+sql即时通讯工具(系统+论文) 微信小程序源码-云商城(带php后端) jQuery移动端图片触摸放大代码.zip jQuery带缩略图电影站幻灯片.zip wordpress图片类cnsecer主题.zip jQuery焦点图插件PicCarousel.zip 灰色幻影css网页模板.zip 电脑主板维修企业网站模板.zip 绿色清新jQuery在线QQ客服.zip jquery全页照片墙画廊.zip 婚庆摄影wordpress主题.zip jquery实现微博分享评论表情.zip SSM框架整合(spring+spring MVC+mybatis)开发学生籍贯后台管理系统 Android头部可滑动导航 Java web课程管理系统 Struts2+Mysql+JSP 微信小程序源码-医疗床位查询小程序 HTML5音乐播放器界面特效.zip jQuery商城网站全屏图片切换代码.zip 清新CSS3动画网页模板.zip 一个带点动态效果的html5引导页代码html+css+js jQuery动态垂直时间轴代码.zip jQuery手机端右侧弹出菜单.zip jquery向导提示操作插件.zip 微信小程序源码-创客+实现大量功能,推荐研究 jquery弹出层登录和全屏注册.zip jQuery焦点图插件Krakatoa.zip jquery small2big图片突出显示.zip 适合产品销售页面CSS3定价表.zip 【PHP源码】心晴快乐BLOG v2.10_blog210.zip CSS3百叶窗式图片动画切换特效.zip 实用自动补全工具AutoCompleteTextView 软件设计师教程 最新版(第三版) 高清PDF完整版 可拖拽和带预览图的jQuery文件上传插件ssi-uploader java后台代码 基于JAVA CS远程监控系统软件的实现(源代码+论文) UI留言评论css3样式.zip jQuery ReSmenu下拉菜单.zip 基于Bootstrap支持移动端的响应式轮播图效果 jQuery清爽的点名抽奖游戏代码.zip jQuery投资理财计算器代码.zip Material Design滑动菜单导航代码.zip 2016年酷炫HTML5动画合集 jquery仿腾讯云下拉导航.zip Java图书管理系统 音乐博客div+css网页模板.zip java SSH框架开发蓝色风格科技门户网站 贴近用户体验的jQuery日期选择插件.zip 纯CSS3实现紫色登录表单.zip 金色企业CSS网页模板.zip 微信小程序源码-麻将骰子:附详细教程 wordpress单页主题OneEngine.zip jQuery滑动解锁登录表单代码.zip UI设计jquery插件YBslider.zip 【ASP.NET源码】XML简单留言本_xmllyb.zip jQuery点击动画增加积分数量.zip 毕业设计-Struts2+Hibernate4.2+Spring3的房产租赁管理系统 jQuery数字时钟插件MyDigitClock.zip 蓝色航空公司html5模板.zip html5绿色扁平化播放器代码.zip 电脑手机维修公司官网模板.zip 【ASP.NET源码】peny 学生单项选择考试系统 v1.0_zxdxks.zip 粉红色喜庆婚纱HTML5模板.zip wordpress扁平博客主题.zip 红色喜庆商务公司网站模板.zip css图片滚动下拉效果.zip 酒仙网jQ侧栏弹出导航.zip Android手指滑动切换页面 jquery百度安全检测进度条.zip CSS3制作动态索引卡特效.zip 【PHP源码】Destoon B2B网站管理系统 1.0 GBK Build 20090822_destoon_1.0_gbk.zip jQuery垂直手风琴列表展示代码.zip 顶级珠宝品牌HTML5模板.zip jQuery制作的下拉选项菜单.zip 【PHP源码】Mini File Host v1.5_mfh-1.5-en.zip 欧美婚纱摄影网站模板.zip bootstrup3全屏切换幻灯片代码.zip 【PHP源码】Flash个性涂鸦板 for F2blog and Bo-Blog_tuya.zip 在线教育平台响应式整站HTML模板 js calendar橙色日期选择器代码.zip java实现附近的人功能 win8风格+bootstrap后台全套模板下载 城市港口HTML平面模板.zip jquery图片滚动放大效果.zip 不含jQ的页面背景切换.zip 微信小程序 - 降温摇可乐.zip jQuery点击弹出确认或取消删除特效.zip 【PHP源码】目录直读式图片展示系统 v2.0_photo.zip SSM+Maven+Mysql三大框架整合图书管理系统 js图片过渡效果.zip jQuery弹出层图片动画查看代码.zip MUI手机购物商城源码 java+sqlserver2008超市管理系统+数据库 雅虎3屏焦点图代码.zip 微信小程序 - k-push(含后端).zip 投资银行业务网页模板.zip 域名停放出售单页模板.zip jQuery表格分页排序插件.zip Tabs带图形按钮选项卡切换.zip 网页加载进度条插件MProgress.js.zip Discuz! HelloKitty.zip parallax.js的Demo(github下载,解压即用) 横向排序的瀑布流jquery实现,完整项目 jQuery全屏大幅下拉菜单导航代码.zip jQuery叶子Tab选项卡.zip JSP Explorer 文件浏览器 v1.0 css3鼠标悬停文字模糊效果.zip 【ASP.NET源码】小崔人才系统 v2.1_jobcui2.1.zip js随鼠标弹性漂移.zip html5客户端表单验证.zip jquery右侧悬浮在线客服代码.zip jQuery响应式表格插件basictable.zip 紫色风格医疗网站模板.zip 百度验证码识别api开发例子代码 CSS3实现黑色卷角翻页导航条.zip 大气企业CSS网页模板.zip java识别及生成二维码 证券交易公司网站模板.zip 微信小程序源码-选课投票 fancybox v1.3.4 jQ插件.zip 微信小程序源码-投资收益 城市港口HTML平面模板.zip jQuery图片放大变小切换代码.zip 非Maven基于SSM+Atomikos的分布式事务处理案例源码 上线APP-风知记事本开源代码 jQuery手机发送验证码倒计时代码.zip 百度应用网站jQuery焦点图.zip 色彩鲜艳的HTML5商务模板.zip jQuery表格插件带分页控制代码.zip phpwind粉红色全套风格.zip jQuery带搜索跳转分页代码.zip 紫色简洁HTML5网站模板.zip jQuery添加购物车复选框.zip jQuery图片排列动画效果.zip 触屏拖动切换jQuery相册代码.zip 【超炫购物模板】仿拍鞋网商城首页触屏版html5手机wap购物网站模板下载.zip wordpress阿里百变XIU主题.zip mysql 优化详解视频教程 获取本地时间的Html5时钟特效.zip 基于jQuery&CSS3开关按钮特效.zip spring security demo jQuery京东浮动网站楼层导航代码.zip 艺术画廊CSS网页模板.zip CSS3时钟圆形立体倒计时代码.zip bootstrap流行模板 JQ酷狗首页带文字说明焦点图.zip jQuery+HTML5实现刮刮乐抽奖特效.zip 微信小程序源码-医疗床位查询小程序 虾囧CMS(仿快乐麻花,臭事百科,内涵段子)笑话程序 jquery拖拽tip提示工具.zip jQuery全屏内容插件.zip jQuery清爽的点名抽奖游戏代码.zip javaEE服务端RSA解加解密
举报X