基于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 border-image使用说明
Jun 23 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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里的JS打印函数
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
php array_map()函数实例用法
2021/03/03 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jquery.validate使用详解
2016/06/02 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Python版的文曲星猜数字游戏代码
2013/09/02 Python
详细介绍Python中的偏函数
2015/04/27 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
解决python3输入的坑——input()
2020/12/05 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
升职自荐信
2013/11/28 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书