css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下HTML5中的CSS3技术。

体验效果：
http://keleyi.com/a/bjad/yin8b5eb.htm

代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>css3图片模糊过滤特效-柯乐义</title>

     <style>

 .keleyi img{ width:200px; height:200px;}

     .keleyi{

       list-style: none;

       margin: 10px auto; padding: 0;

       width: 642px; /* (200+10+4)x3 */

       font-size: 0; /* fix inline-block spacing */

     }

     .keleyi li{

         display: inline-block;

         *display: inline;

         zoom: 1;

         width: 200px; height: 200px;

         margin: 2px;

         border: 5px solid #fff;

         -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);

         -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);

         box-shadow: 0 2px 2px rgba(0,0,0,.1);

         -webkit-transition: all .3s ease;

         -moz-transition: all .3s ease;

         -ms-transition: all .3s ease;

         -o-transition: all .3s ease;

         transition: all .3s ease;

     }

     .keleyi:hover li:not(:hover){

         -webkit-filter: blur(2px) grayscale(1);

         -moz-filter: blur(2px) grayscale(1);

         -o-filter: blur(2px) grayscale(1);

         -ms-filter: blur(2px) grayscale(1);

         filter: blur(2px) grayscale(1);

         opacity: .7; /* fallback */

     }

   </style>

 </head>

 <body>

     <div style="width: 736px; margin: 0px auto;"><h2>css3图片模糊过滤特效·柯乐义</h2>

         请使用支持CSS3的浏览器,移动光标到图片上。 <a href="http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文</a>

     </div>

     <ul class="keleyi">

         <li>

             <img src="http://keleyi.com/image/a/mdvii14p.jpg"></li>

         <li>

             <img src="http://keleyi.com/image/a/968oqhtf.jpg"></li>

         <li>

             <img src="http://keleyi.com/image/a/crgi0c5y.jpg"></li>

     </ul>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

css3图片模糊过滤效果的更多相关文章

  1. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  3. 超厉害的CSS3图片破碎爆炸效果！

    var fx  = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...

  4. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  5. CSS3图片折角效果

    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...

  6. CSS3 图片悬浮缩放效果

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  8. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  9. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

随机推荐

  1. PHP 静态

    类分 1 普通成员 是属于对象的 2 静态成员 是属于类的 例: class Ren { public $name; public static $zhongzu;      static   就可以 ...

  2. Nginx服务器之 Nginx的基本配置

    本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...

  3. 关于ie11 的开发者工具

    win7旗舰系统64为,更新ie11: 新安装了ie11浏览器,安装以后发现原来可以正常使用的开发者工具不能使用,提示 Imposible use F12 Developer Tools (Excep ...

  4. uwp 图片切换动画 使用帧动画

    上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...

  5. jsp中头的导入两种方式区别

    1.<jsp:include page="top.jsp">先将top.jsp中的java脚本和jsp指令执行完毕以后再讲top.jsp页面加入面中 2.<%@ ...

  6. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  7. document.getElementById()与 $()区别

    document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...

  8. 【原创】开源Math.NET基础数学类库使用(14)C#生成安全的随机数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  9. react+redux教程（四）undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  10. 小菜学习Winform（二）WMPLib实现音乐播放器

    前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlay ...