css3图片模糊过滤特效

时间：2022-09-07 22:25:10

体验效果：
点击这里查看效果

代码如下：
<!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: 50px 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: 150px;
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>
<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>

原文：http://keleyi.com/a/bjad/yin8b5eb.htm

css3图片模糊过滤特效的更多相关文章

  1. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  2. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  3. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  4. 基于HTML5&sol;CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  5. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  7. 9种jQuery和css3图片动画特效代码演示

    1.*旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  8. jQuery&sol;CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  9. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. git回滚错误提交

    git log //找到你要回滚的那次提交 比如:43596f6b1f57157e627c25ae7a843f60157ac52d git reset --hard HEAD~43596f6b1f57 ...

  2. 在Windows Phone 8中使用Live Connect并保持登陆状态

    Live Connect可以让各种客户端访问Live账号.获取好友列表.访问One Drive的文件等,官方地址在此:http://msdn.microsoft.com/zh-cn/live/ff51 ...

  3. Git 从服务器取得最新代码覆盖本地

    第一种方法 git fetch --all git reset --hard origin/master git fetch下载远程最新的, 然后,git reset master分支重置 第二种方法 ...

  4. Vases and Flowers

    hdu4614:http://acm.hdu.edu.cn/showproblem.php?pid=4614 题意:给你n个花瓶,然后有两种操作:1从a开始选择b个花瓶,放进花,输出左端点,右端点 2 ...

  5. 解决win8与VC&plus;&plus;6&period;0不兼容问题

    找到VC++6.0安装文件夹Bin下的MSDEV.EXE程序 将MSDEV名字改为MSDEV1(或MSDEV2,3...) 右击改好的MSDEV1,打开属性面板,选择兼容性,勾上“在兼容模式下运行”, ...

  6. hadoop1&period;2&period;1&plus;hbase0&period;90&period;4&plus;nutch2&period;2&period;1&plus;elasticsearch0&period;90&period;5配置（伪分布式）

    系统:ubuntu14.04 一.hadoop安装 ssh免密码登陆详情见上一篇博客. 解压hadoop1.2.1到某个目录下,这里解压到ubuntu下载目录下(注意没必要使用管理员权限) 在hado ...

  7. &lbrack;Linux Kernel&rsqb;查看CentOS版本方法

    查看CentOS版本方法  有以下命令可以查看:   # lsb_release -a LSB Version:    :core-3.1-ia32:core-3.1-noarch:graphics- ...

  8. 利用碎片化时间Get Linux系统

    利用碎片化时间Get Linux系统 起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫.我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选 ...

  9. freeswitch反注册记录

    应用情景: 使用阿里服务器,落地使用本地的模拟线路(O口网关). 1.FreeSWITCH 服务器开一个账号,比如 5000 internal , O口 SIP设置页面按照网关注册 5000 的账号信 ...

  10. Maven下CXF的wsdl2java生成客户端代码

    <plugin> <groupId>org.apache.cxf</groupId> <artifactId>cxf-codegen-plugin&lt ...

相关文章