基于CSS3实现图片模糊过滤效果


Posted in HTML / CSS onNovember 19, 2015

先给大家展示下效果图,如果和你想象的效果一样请继续往下看。

基于CSS3实现图片模糊过滤效果

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

代码如下所示:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>css3图片模糊过滤特效-柯乐义</title>   
  6.     <style>   
  7. .keleyi img{ width:200pxheight:200px;}   
  8.     .keleyi{   
  9.       list-stylenone;   
  10.       margin10px autopadding: 0;   
  11.       width642px/* (200+10+4)x3 */  
  12.       font-size: 0; /* fix inline-block spacing */  
  13.     }   
  14.     .keleyi li{   
  15.         displayinline-block;   
  16.         *displayinline;   
  17.         zoom: 1;   
  18.         width200pxheight200px;   
  19.         margin2px;   
  20.         border5px solid #fff;   
  21.         -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
  22.         -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
  23.         box-shadow: 0 2px 2px rgba(0,0,0,.1);   
  24.         -webkit-transition: all .3s ease;   
  25.         -moz-transition: all .3s ease;   
  26.         -ms-transition: all .3s ease;   
  27.         -o-transition: all .3s ease;   
  28.         transition: all .3s ease;          
  29.     }   
  30.     .keleyi:hover li:not(:hover){         
  31.         -webkit-filter: blur(2px) grayscale(1);   
  32.         -moz-filter: blur(2px) grayscale(1);   
  33.         -o-filter: blur(2px) grayscale(1);   
  34.         -ms-filter: blur(2px) grayscale(1);   
  35.         filter: blur(2px) grayscale(1);   
  36.         opacity: .7; /* fallback */          
  37.     }   
  38.   </style>   
  39. </head>   
  40. <body>   
  41.     <div style="width: 736px; margin: 0px auto;"><h2>css3图片模糊过滤特效·柯乐义</h2>   
  42.         请使用支持CSS3的浏览器,移动光标到图片上。 <a href="http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文</a>   
  43.     </div>   
  44.     <ul class="keleyi">   
  45.         <li>   
  46.             <img src="http://keleyi.com/image/a/mdvii14p.jpg"></li>   
  47.         <li>   
  48.             <img src="http://keleyi.com/image/a/968oqhtf.jpg"></li>   
  49.         <li>   
  50.             <img src="http://keleyi.com/image/a/crgi0c5y.jpg"></li>   
  51.     </ul>   
  52. </body>   
  53. </html>  

以上代码就是本文的全部内容,代码简单易懂,相信大家都可以看得懂吧,有任何问题欢迎随时给我留言,我会在第一时间和大家联系的。谢谢大家一直以来对三水点靠木网站的支持,有你们的关注我们会做的更好,谢谢!

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
Css3圆角边框制作代码
Nov 18 #HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 #HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 #HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
You might like
一段防盗连的PHP代码
2006/12/06 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
php类常量的使用详解
2013/06/08 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
浅析php创建者模式
2014/11/25 PHP
php验证手机号码
2015/11/11 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
用vue写一个日历
2020/11/02 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
python gdal安装与简单使用
2019/08/01 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python txt文件如何转换成字典
2020/11/03 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
个人务虚会发言材料
2014/10/20 职场文书
高中数学教学反思范文
2016/02/18 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
python获取带有返回值的多线程
2022/05/02 Python