by 张鑫旭
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="description" content="兼容性的局部模糊毛玻璃效果效果-百度图片首页示意 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面之兼容性的局部模糊毛玻璃效果效果-百度图片首页示意" />
<meta name="keywords" content="css, jQuery, javascript" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<title>兼容性的局部模糊毛玻璃效果效果-百度图片首页示意</title>
<style>
/* for IE7+ */
html {
overflow: hidden;
}
body {
margin: 0;
font-family: 'microsoft yahei';
background-color: #9C5C1E;
}
html,
body {
height: 100%;
}
.hidden {
display: none;
}
.back {
position: absolute;
right: 15px;
top: 15px;
padding: 1px 5px;
background-color: #000;
font-size: 14px;
text-decoration: none;
color: #fff;
opacity: .8;
filter: alpha(opacity=80);
}
.background {
position: fixed;
_position: absolute;
width: 100%;
top: 0;
left: 0;
}
.container {
width: 860px;
height: 310px;
position: absolute;
left: 50%;
top: 50%;
margin: -155px 0 0 -430px;
/* IE9+ */
background-color: rgba(255, 255, 255, .1);
/* IE6-IE8 */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#17FFFFFF, endColorStr=#17FFFFFF);
}
:root .container {
filter: none;
}
.inner {
padding: 10px 0 0 10px;
overflow: hidden;
_zoom: 1;
}
.list {
width: 160px;
height: 140px;
float: left;
margin: 0 10px 10px 0;
position: relative;
cursor: pointer;
overflow: hidden;
}
.layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cover {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.blur {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
/* blur */
filter: url(blur-5px.svg#blur);
/* css3 */
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
/* FireFox 35+ support */
/* IE6~IE9 */
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
*left: -5px;
left: -5px0;
}
:root .blur {
left: -5px 0;
/* Just IE9 */
}
.mask {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
/* IE9+ */
background-color: rgba(0, 0, 0, .2);
/* IE6-IE8 */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#34000000, endColorStr=#34000000);
color: #fff;
font-size: 14px;
text-indent: 10px;
}
:root .mask {
filter: none;
}
/* affect */
.list img,
.list svg {
-webkit-transition: all .25s;
transition: all .25s;
vertical-align: bottom;
}
.list:hover .layer,
.list:hover .blur {
-webkit-transform: scale(1.05) translateZ(0);
-ms-transform: scale(1.05);
transform: scale(1.05) translateZ(0);
/* IE6-IE8 */
zoom: 1.05;
}
:root .list:hover .layer,
:root .list:hover .blur {
zoom: 1;
}
</style>
</head>
<body>
<svg class="hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/xique1.jpg" class="background">
<a href="http://www.zhangxinxu.com/wordpress/?p=4571" class="back">回到相关文章 »</a>
<div class="container">
<div class="inner">
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="blur">
<div class="mask">摄影</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="blur">
<div class="mask">旅游</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="blur">
<div class="mask">明星</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="blur">
<div class="mask">设计</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="blur">
<div class="mask">宠物</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="blur">
<div class="mask">时尚</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="blur">
<div class="mask">壁纸</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="blur">
<div class="mask">动漫</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="blur">
<div class="mask">家居</div>
</div>
</div>
<div class="list">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="layer">
<div class="cover">
<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="blur">
<div class="mask">汽车</div>
</div>
</div>
</div>
</div>
<script>
//IE10+ blur
if (typeof document.msHidden != "undefined") {
[].slice.call(document.querySelectorAll(".cover img")).forEach(function (img) {
img.classList.add("hidden");
var myImage = new Image(), src = img.src;
img.insertAdjacentHTML("afterend", '<svg class="blur" width="160" height="140">
<image xlink:href="'+ src + '" src="' + src + '" width="160" height="140" y="0" x="0" filter="url(#blur)" />
</svg>');
});
}
</script>
</body>
</html>