【前端】模糊图片
1.使用svg和css来模糊图片
[代码 http://bin.amazeui.org/lixedacuje/1/edit?html,css,output)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title> </title>
</head>
<body>
<img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" />
<svg id="svg-image-blur">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="2" />
</filter>
</svg>
</body>
</html>
#css-filter-blur { margin: 20px; }
#css-filter-blur:hover {
-webkit-filter: blur(1px);
filter: url(#blur-effect-1);
}
.lt-ie9 #css-filter-blur:hover {
filter: progid:DXImageTransform.Microsoft.Blur(Strength=2);
position: relative;
left: -2px;
top: -2px;
}
鼠标移动到图片上既可以看到效果。
2.使用第三方动画库来模糊，比如animo-js
[示例]（http://labs.bigroomstudios.com/libraries/animo-js）
// Blurring of the image
$('#blur_img').animo('blur');
// Focus
$('#blur_img').animo('focus');
// Blurring of the text (slowly and heavily)
$('#blur_text').animo('blur', {duration: 3, amount: 15});
// Focus
$('#blur_text').animo('focus');
