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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>css3属性 filter</title>
  7.     <style>
  8.     *{padding: 0; margin: 0;}
  9.     .imgbox{width: 860px;margin: 20px auto; height: 256px;}
  10.     img{display: block; width: 410px; float: left; }
  11.     img:last-of-type{float:right;}
  12.     .box{width: 860px;margin: 0 auto;  }
  13.     input[type="button"]{font-size: 14px;padding: 10px 12px;border:none;}
  14.     input[type="button"].hover,input[type="button"]:hover{background: #2BA5D3;color: #fff;}
  15.     .inner{width: 860px;text-align: center;margin: 0 auto;padding: 0 0 20px 0;font-size: 20px;font-family: 'microsoft yahei'}
  16.     </style>
  17.     <script>
  18.         window.onload=function(){
  19.             var img=document.querySelectorAll('img')[1];
  20.             var btn=document.querySelectorAll('input');
  21.             var div=document.querySelector('.inner');
  22.             img.style.WebkitFilter='grayscale(0.8)';
  23.             div.innerHTML='grayscale：灰度，值为0-1之间小数';
  24.             for(var i=0; i<btn.length;i++){
  25.                 btn[i].onclick=function(){
  26.                     switch(this.value) {
  27.                         case 'grayscale':
  28.                             img.style.WebkitFilter='grayscale(0.8)';
  29.                             break;
  30.                         case 'sepia':
  31.                             img.style.WebkitFilter='sepia(0.8)';
  32.                             break;
  33.                         case 'saturate':
  34.                             img.style.WebkitFilter='saturate(50)';
  35.                             break;
  36.                         case 'hue-rotate':
  37.                             img.style.WebkitFilter='hue-rotate(90deg)';
  38.                             break;
  39.                         case 'invert':
  40.                             img.style.WebkitFilter='invert(0.3)';
  41.                             break;
  42.                         case 'opacity':
  43.                             img.style.WebkitFilter='opacity(0.2)';
  44.                             break;
  45.                         case 'brightness':
  46.                             img.style.WebkitFilter='brightness(0.8)';
  47.                             break;
  48.                         case 'contrast':
  49.                             img.style.WebkitFilter='contrast(210)';
  50.                             break;
  51.                         case 'blur':
  52.                             img.style.WebkitFilter='blur(5px)';
  53.                             break;
  54.                         case 'drop-shadow':
  55.                             img.style.WebkitFilter='drop-shadow(10px 10px 5px #aaa)';
  56.                             break;
  57.                     }
  58.                     div.innerHTML=this.value+'：'+this.getAttribute('data-info');
  59.                 }
  60.  
  61.             }
  62.         }
  63.     </script>
  64. </head>
  65. <body>
  66.     <div class="imgbox" id="imgBox">
  67.         <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">
  68.         <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">
  69.     </div>
  70.     <div class="inner"></div>
  71.     <div class="box">
  72.         <input type="button" value="grayscale" data-info="灰度，值为0-1之间小数">
  73.         <input type="button" value="sepia"  data-info="褐色，值为0-1之间小数">
  74.         <input type="button" value="saturate"  data-info="饱和度，值为num">
  75.         <input type="button" value="hue-rotate"  data-info="色相，值为0-360之间的色轮数">
  76.         <input type="button" value="invert"  data-info="反色，值为0-1之间小数">
  77.         <input type="button" value="opacity"  data-info="不透明度，值为0-1之间小数">
  78.         <input type="button" value="brightness"  data-info="亮度，值为0-1之间小数">
  79.         <input type="button" value="contrast"  data-info="对比度，值为num">
  80.         <input type="button" value="blur"  data-info="模糊，值为length">
  81.         <input type="button" value="drop-shadow"  data-info="阴影，同box-shadow写法">
  82.     </div>
  83.  
  84. </body>
  85. </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. Jquery获取selelct选中值

    误区: 一直以为jquery获取select中option被选中的文本值,是这样写的: $("#s").text();  //获取所有option的文本值 实际上应该这样: $(& ...

  2. 【Uploadify】远程上传图片到【七牛云存储】

    1.下载Uploadify版本3.2.1 2.下载七牛SDK 解压后将 qiniu 文件夹copy到uploadify文件夹下 3.修改uploadify.php文件 <?php $verify ...

  3. C++ streambuf用法

    class LogStreamBuf : public std::streambuf { public: // REQUIREMENTS: "len" must be >= ...

  4. jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a&qu ...

  5. iOS Architecture Patterns

    By Bohdan Orlov on 21 Mar 2016 - 0 Comments iOS FYI: Slides from my presentation at NSLondon are ava ...

  6. Windows服务中用Timer和线程两种方式来执行定时任务

    在Service服务文件夹下新建Windows服务 - TestService

  7. php 数组排序代码

    php对数组排序代码.   <?phpclass='pingjiaF' frameborder='0' src='http://www.jbxue.com' scrolling='no'> ...

  8. PHP 下载文件时自动添加bom头的方法

    首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order ...

  9. webshell + xss 猥琐刷某投票

    团队成员发来一个投票的地址,需要撸某某网站的一个某某投票,果断看了下,ip限制了,看到post 数据包 额 随便找个大流量shell post 数据 Js代码代码 <script type=&q ...

  10. 光迁PING值延迟计算！以及到中国最快的美国机房是哪个机房?

    美国圣安娜KT机房/美国KT机房/美国KT服务器 KT机房是美国直达大陆最快的机房,ping值一般为195MS,是做web服务器的首选机房,深受中小站长的欢迎! 我们平时测试美国服务器的速度,都是通过 ...