基于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 29 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
css中:last-child不生效的解决方法
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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
php xhprof使用实例详解
2019/04/15 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
手机业务员岗位职责
2013/12/13 职场文书
产品质量承诺书
2014/03/27 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
抗洪救灾标语
2014/10/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
学校政风行风整改方案
2014/10/25 职场文书
西柏坡导游词
2015/02/05 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
MySQL学习总结-基础架构概述
2021/04/05 MySQL
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
python中pymysql包操作数据库方法
2022/04/19 Python