【前端】模糊图片

最新推荐文章于 2024-04-05 10:51:10 发布

weixin_33953249

最新推荐文章于 2024-04-05 10:51:10 发布

阅读量172

点赞数

文章标签：前端 ViewUI

原文链接：https://yq.aliyun.com/articles/255638

版权

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');