基于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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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学习之整理字符串
2011/04/17 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
javascript中this的四种用法
2015/05/11 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python入门篇之字典
2014/10/17 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
kali中python版本的切换方法
2019/07/11 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python list运算操作代码实例解析
2020/01/20 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
行政部主管岗位职责
2013/12/28 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
英语求职信范文
2014/05/23 职场文书
怎样写家长意见
2015/06/04 职场文书
Redis 异步机制
2022/05/15 Redis