基于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 相关文章推荐
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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中MVC的开发经验分享
2012/05/17 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript File分段上传
2016/03/10 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
党员公开承诺书和承诺事项
2014/03/25 职场文书
医学求职自荐信
2014/06/21 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Python词云的正确实现方法实例
2021/05/08 Python
python数字图像处理:图像的绘制
2022/06/28 Python