分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

利用CSS3实现图片的毛玻璃效果

用PS给图片做后期效果制作的朋友都知道,PS中的滤镜特效有个高斯模糊,这个用来给图片做毛玻璃效果很好,比如下图,就是余斗用高斯模糊做出的一个毛玻璃效果:

原图如下:

这个效果用PS来实现非常简单,但是在前端设计中,这样的效果我们还可以通过CSS3来实现,代码也很简单,实现效果如下:

具体代码

HTML代码:


<div id="content">
<img id="blur" src="blur.jpg">
</div>
 

CSS代码:


#content{
    position:relative;
    overflow:hidden;
}
#blur{
    filter:blur(10px);
    -webkit-filter:blur(18px);
    -moz-filter:blur(18px);
    -ms-filter:blur(18px);
    -o-filter:blur(18px);
}
 

更多毛玻璃特效应用请点击:《CSS3毛玻璃实现微信发红包看照片》


资源均来自第三方,谨慎下载,前往第三方网站下载


爱资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:利用CSS3实现图片的毛玻璃效果
喜欢 ()分享 (0)