css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下HTML5中的CSS3技术。
体验效果：
http://keleyi.com/a/bjad/yin8b5eb.htm
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3图片模糊过滤特效-柯乐义</title>
<style>
.keleyi img{ width:200px; height:200px;}
.keleyi{
list-style: none;
margin: 10px auto; padding: 0;
width: 642px; /* (200+10+4)x3 */
font-size: 0; /* fix inline-block spacing */
}
.keleyi li{
display: inline-block;
*display: inline;
zoom: 1;
width: 200px; height: 200px;
margin: 2px;
border: 5px solid #fff;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
} .keleyi:hover li:not(:hover){
-webkit-filter: blur(2px) grayscale(1);
-moz-filter: blur(2px) grayscale(1);
-o-filter: blur(2px) grayscale(1);
-ms-filter: blur(2px) grayscale(1);
filter: blur(2px) grayscale(1);
opacity: .7; /* fallback */
} </style>
</head>
<body>
<div style="width: 736px; margin: 0px auto;"><h2>css3图片模糊过滤特效·柯乐义</h2>
请使用支持CSS3的浏览器,移动光标到图片上。 <a href="http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文</a>
</div>
<ul class="keleyi">
<li>
<img src="http://keleyi.com/image/a/mdvii14p.jpg"></li>
<li>
<img src="http://keleyi.com/image/a/968oqhtf.jpg"></li>
<li>
<img src="http://keleyi.com/image/a/crgi0c5y.jpg"></li>
</ul>
</body>
</html>
web前端：http://www.cnblogs.com/jihua/p/webfront.html
css3图片模糊过滤效果的更多相关文章
-
css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
-
CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
-
超厉害的CSS3图片破碎爆炸效果！
var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...
-
css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
-
CSS3图片折角效果
本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...
-
CSS3 图片悬浮缩放效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
-
基于CSS3图片悬停放大特效
今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...
-
CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
-
小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
随机推荐
-
Objective-C中#define的常见用法
参考博客 http://blog.csdn.net/kindazrael/article/details/8108868 在C语言中,预处理代码是非常强大的工具,能让代码变得可读性和可维护性更强.预处 ...
-
c语言实例
#include <stdio.h> int main() { ; ; i=max(j,k); printf("i=%d\n",i); ; } int max(int ...
-
IP address/地址 检查
1.Determine if a string is a valid IP address in C Beej's Guide to Network Programming 2.9.14. inet_ ...
-
windows上安装winsshd
winsshd下载地址:http://www.bitvise.com/ssh-server-download 安装后默认配置即可使用:
-
LNMP 基于域名的虚拟主机配置 （Centos5.6）
. . server { listen ; #listen [::]: default_server ipv6only=on; server_name www.blog.com; index inde ...
-
Xcode - 内存分析
内存分析工具 1. ARC中的内存泄露 1. 一般内存分析, 主要是看看有没有内存泄露 2. 内存泄露: 创建了对象, 使用完毕没有释放, 将来就可能造成内存泄露 3. 内存泄露: 主要用于MRC的内 ...
-
Oracle的海量存储技术
下午去參加一个Oracle有关海量数据存储技术的培训讲座了. 地址在广州市林和西路101号天河区计经大楼西側三楼. 培训发起机构为:广州中睿信息技术有限公司. 以下就简要总结一下所听到的一些东西,也算 ...
-
一次scrapy失败的提示信息：由于连接方在一段时间后没有正确答复或连接的主机没有反 应，连接尝试失败
2017-10-31 19:09:26 [scrapy.extensions.logstats] INFO: Crawled 8096 pages (at 67 pages/min), scraped ...
-
关于OPEN_MAX宏undeclared的问题
最近在看unp时,I/O复用-poll一章的代码使用到了OPEN_MAX.据书中描述,这一宏定义在limits.h头文件中,指代一个进程在任意时刻能打开的最大描述符数目.但在代码编译时遇到了错误,提示 ...
-
python处理json格式的数据
这里我就不介绍json了,不知道json的同学可以去百度一下json,首先我们的json的格式如下,这个json有点长,这个json来自我以前的一个小任务,具体看这里:http://www.cnblo ...