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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 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高级编程实例:编写守护进程
2014/09/02 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php去除数组中重复数据
2014/11/18 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
五分钟演讲稿
2014/04/30 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
师范生小学见习总结
2015/06/23 职场文书
python实现简单倒计时功能
2021/04/21 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Pandas数据结构之Series的使用
2022/03/31 Python