基于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 中实现炫酷的loading效果
Apr 26 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
python删除过期文件的方法
2015/05/29 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python协程的用法和例子详解
2017/09/09 Python
Python多继承顺序实例分析
2018/05/26 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
Collection和Collections的区别
2016/05/02 面试题
档案管理员岗位职责
2013/12/01 职场文书
超市营业员岗位职责
2013/12/20 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
环保倡议书
2014/04/14 职场文书
促销活动总结怎么写
2014/06/25 职场文书
争先创优公开承诺书
2014/08/30 职场文书
优秀教师个人材料
2014/12/15 职场文书
科技活动总结范文
2015/05/11 职场文书
领导视察通讯稿
2015/07/18 职场文书