CSS3 滤镜 webkit-filter详细介绍及使用方法


Posted in HTML / CSS onDecember 27, 2012

大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

-webkit-filter 的用法
-webkit-filter 用法是标准的 CSS 写法,如:
复制代码
代码如下:

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有
blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 饱和度
hue-rotate 色相旋转

下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

原图
CSS3 滤镜 webkit-filter详细介绍及使用方法

blur 模糊
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:blur(2px);

brightness 亮度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:brightness(25%);

contrast 对比度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: contrast(50%);

drop-shadow 阴影
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: opacity(50%);

grayscale 灰度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: grayscale(80%);

sepia 褐色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: sepia(100%);

invert 反色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: invert(100%);

hue-rotate 色相旋转
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:hue-rotate(180deg);

saturate 饱和度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: saturate(1000%);

HTML / CSS 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 #HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 #HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
You might like
PHP语法速查表
2006/12/06 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php接口隔离原则实例分析
2019/11/11 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
TensorFlow实现创建分类器
2018/02/06 Python
分析Python读取文件时的路径问题
2018/02/11 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
实习单位接收函模板
2014/01/10 职场文书
中式婚礼主持词
2014/03/13 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年管理工作总结
2014/11/22 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
新闻稿标题
2015/07/18 职场文书
python删除csv文件的行列
2021/04/06 Python