-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。一共有10种最基本的特效，下来这个DEMO很好的展示了这些效果：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>css3属性 filter</title>

    <style>

    *{padding: 0; margin: 0;}

    .imgbox{width: 860px;margin: 20px auto; height: 256px;}

    img{display: block; width: 410px; float: left; }

    img:last-of-type{float:right;}

    .box{width: 860px;margin: 0 auto;  }

    input[type="button"]{font-size: 14px;padding: 10px 12px;border:none;}

    input[type="button"].hover,input[type="button"]:hover{background: #2BA5D3;color: #fff;}

    .inner{width: 860px;text-align: center;margin: 0 auto;padding: 0 0 20px 0;font-size: 20px;font-family: 'microsoft yahei'}

    </style>

    <script>

        window.onload=function(){

            var img=document.querySelectorAll('img')[1];

            var btn=document.querySelectorAll('input');

            var div=document.querySelector('.inner');

            img.style.WebkitFilter='grayscale(0.8)';

            div.innerHTML='grayscale：灰度，值为0-1之间小数';

            for(var i=0; i<btn.length;i++){

                btn[i].onclick=function(){

                    switch(this.value) {

                        case 'grayscale':

                            img.style.WebkitFilter='grayscale(0.8)';

                            break;

                        case 'sepia':

                            img.style.WebkitFilter='sepia(0.8)';

                            break;

                        case 'saturate':

                            img.style.WebkitFilter='saturate(50)';

                            break;

                        case 'hue-rotate':

                            img.style.WebkitFilter='hue-rotate(90deg)';

                            break;

                        case 'invert':

                            img.style.WebkitFilter='invert(0.3)';

                            break;

                        case 'opacity':

                            img.style.WebkitFilter='opacity(0.2)';

                            break;

                        case 'brightness':

                            img.style.WebkitFilter='brightness(0.8)';

                            break;

                        case 'contrast':

                            img.style.WebkitFilter='contrast(210)';

                            break;

                        case 'blur':

                            img.style.WebkitFilter='blur(5px)';

                            break;

                        case 'drop-shadow':

                            img.style.WebkitFilter='drop-shadow(10px 10px 5px #aaa)';

                            break;

                    }

                    div.innerHTML=this.value+'：'+this.getAttribute('data-info');

                }

            }

        }

    </script>

</head>

<body>

    <div class="imgbox" id="imgBox">

        <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">

        <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">

    </div>

    <div class="inner"></div>

    <div class="box">

        <input type="button" value="grayscale" data-info="灰度，值为0-1之间小数">

        <input type="button" value="sepia"  data-info="褐色，值为0-1之间小数">

        <input type="button" value="saturate"  data-info="饱和度，值为num">

        <input type="button" value="hue-rotate"  data-info="色相，值为0-360之间的色轮数">

        <input type="button" value="invert"  data-info="反色，值为0-1之间小数">

        <input type="button" value="opacity"  data-info="不透明度，值为0-1之间小数">

        <input type="button" value="brightness"  data-info="亮度，值为0-1之间小数">

        <input type="button" value="contrast"  data-info="对比度，值为num">

        <input type="button" value="blur"  data-info="模糊，值为length">

        <input type="button" value="drop-shadow"  data-info="阴影，同box-shadow写法">

    </div>

</body>

</html>

用法是标准的CSS写法，如：-webkit-filter: blur(2px)；关于浏览器的支持，在caniuse.com 里可以看到，除开ie有及Opea min不支持以外，其它浏览器都可以良好的支持；但是需要注意的是，为了避免出现兼容问题，还是应该加上各大浏览器的私有前缀；如-webkit，-moz；上面这个demo，只是兼容了webkit，浏览的时候，需在chrome里面运行；

CSS3 filter10种特效整理的更多相关文章

  1. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  2. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  3. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. 【AS3】Flash与后台数据交换四种方法整理

    随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...

  5. 在C#里实现各种窗口切换特效，多达13种特效

    原文:http://www.cnblogs.com/clayui/archive/2011/06/28/2092126.html 预览:   下载 这次clayui给大家带来了比较实用的东西,因为时间 ...

  6. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  7. 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码

    [实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...

  8. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  9. CSS3实现烟花特效 --web前端

    烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...

随机推荐

  1. Android IOS WebRTC 音视频开发总结（二六）-- webrtc调用堆栈

    本文主要是自己之前研究WebRTC代码结构时的一些资料(包括Android,iOS,PC),文章来自博客园RTC.Blacker,转载请说明出处. 1.WEBRTC模块:音频数据采集.发送.接收.播放 ...

  2. SQL 常用方法

    EXCEPT :返回两个结果集的差(即从左查询中返回右查询没有找到的所有非重复值). INTERSECT :返回 两个结果集的交集(即两个查询都返回的所有非重复值). UNION :返回两个结果集的并 ...

  3. iOS 开发经验谈，点击没响应事件

  4. Windows Phone 资源管理与换肤思考

    新入手一台Windows 8的笔记本,安装了VS2013后,终于又可以开发WP了.公司暂时不愿意开发WP,那么咱就自行研究吧! 在没有WP开发环境的时候,曾经在WPF尝试了一下换肤功能的实现.最简单的 ...

  5. 一个利用sed和awk处理文本的小栗子

    这两天做<Linux操作系统>课程的作业,碰到了一个题目,感觉很有意思,很考验对awk掌握的熟练度,故特意拿来分享. 首先说题目是这样的,有这样一段文本: RECORD #这是多余的注释行 ...

  6. 设置trace SQL

    Select PeopleTools, Utilities, Debug, Trace SQL to access the Trace SQL page. You use this page to c ...

  7. css半透明

    filter:alpha(opacity=80); /*支持 IE 浏览器*/-moz-opacity:0.80; /*支持 FireFox 浏览器*/opacity:0.80; /*支持 Chrom ...

  8. [leetcode]_Valid Sudoku

    中间被启程日本的面试弄的没有静下心来复习算法.这样不好,基本功是硬道理.逐步恢复刷题. 题目:给一个数独(九宫格)中的一些数字,判断该数独是否有效. 即按照数独的规则,判断其行.列.小九格中是否有重复 ...

  9. 小菜的系统框架界面设计-灰姑娘到白雪公主的蜕变（工具条OutLookBar）

    灰姑娘本身也有自已的优点,但是却可能因为外貌不讨人喜欢,要变成白雪公主却需要有很多勇气和决心去改变自已: 有一颗善良的心 讨人喜爱的外貌   --蜕变-->  我这里讲的是一个工具条的蜕变过程, ...

  10. Win7、win2008中让IIS7支持asp的方法

    Win7或Windows server 2008中IIS7支持ASP+Access解决方法.  1. 让IIS7支持ASP  Win7或Windows server 2008中IIS7是默认不安装的, ...