基于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教程(1):什么是CSS3
Apr 02 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 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批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Python是编译运行的验证方法
2015/01/30 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python类装饰器用法实例
2015/06/04 Python
Python正则简单实例分析
2017/03/21 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
精彩自我鉴定
2014/01/16 职场文书
五好关工委申报材料
2014/05/31 职场文书
师德模范事迹材料
2014/06/03 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
八项规定整改方案
2014/10/01 职场文书
特此通知格式
2015/04/27 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server