仿百度图片毛玻璃效果

<!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>

<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">回到相关文章 &raquo;</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>

时间： 2024-10-08 04:55:18

仿百度图片毛玻璃效果的相关文章

图片毛玻璃效果

.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeS

用css使图片产生毛玻璃效果

毛玻璃的图片效果,使得其显示更加唯美,用户体验更佳,所以在手机端电脑端应用甚广 比如ios系统: 所以现在我们就来看看毛玻璃效果的实现方法吧: 首先这是html的主要内容: <div class="container"> <div class="mat_class"></div> <p class="word">SHOW TIME</p> </div> 这里container

jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 4.所有图片

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

iOS7 设置背景图片或导航为毛玻璃效果

1.首先导入系统库  Accelerate.framework 2.其次在要实现毛玻璃效果的页面添加头文件   #import <Accelerate/Accelerate.h> 3.再次添加实现函数如下: //加模糊效果函数,传入参数:image是图片,blur是模糊度(0~2.0之间) - (UIImage *)blurryImage:(UIImage *)image withBlurLevel:(CGFloat)blur { //模糊度, if ((blur < 0.1f) ||

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

仿百度壁纸client（六）——完结篇之Gallery画廊实现壁纸预览已经项目细节优化

仿百度壁纸client(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager + Fragment 仿百度壁纸client(二)--主页自己定义ViewPager广告定时轮播图 仿百度壁纸client(三)--首页单向,双向事件冲突处理,壁纸列表的实现 仿百度壁纸client(四)--自己定义上拉载入实现精选壁纸墙 仿百度壁纸client(五)--实现搜索动画GestureDetector

仿百度壁纸客户端（六）——完结篇之Gallery画廊实现壁纸预览已经项目细节优化

仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 仿百度壁纸客户端(四)--自定义上拉加载实现精选壁纸墙 仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 仿百度壁纸客

仿百度壁纸客户端（三）——首页单向，双向事件冲突处理，壁纸列表的实现

仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 上回把广告轮播图给实现了,今天就来把主页的大部分功能给实现了 一.ScrollView和ViewPager滑动事件冲突的解决办法 我们仔细想想,我们的主页架构,首先他是上下滑动的,所以这样要一个ScrollView,然后就是轮播图和其他内容了,这样的话,上下滑动有事件,轮播图也有事件,我们先看下xml的实现原理 home_fragment_xml <?xml version="1.0" encoding=&qu