仿百度图片毛玻璃效果

时间：2017-11-18 15:59:35 阅读：230 评论：0 收藏：0 [点我收藏+]

标签：页面宠物 vertica dstat word classlist hid oom sof

<!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: -5px\0;
}
: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>

<a href="http://www.zhangxinxu.com/wordpress/?p=4571" class="back">回到相关文章 »</a>

仿百度图片毛玻璃效果

标签：页面宠物 vertica dstat word classlist hid oom sof

原文地址：http://www.cnblogs.com/daysme/p/7856755.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行