基于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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 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
我的论坛源代码(三)
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php实现微信企业转账功能
2018/10/02 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue中轮训器的使用
2019/01/27 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python中set()函数简介及实例解析
2018/01/09 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
学生档案自我鉴定
2013/10/07 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
图书室标语
2014/06/21 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
基层党支部承诺书
2015/04/30 职场文书
2015公司年度工作总结
2015/05/14 职场文书
故意伤害辩护词
2015/05/21 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书