您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

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

发布时间:2016-03-06编辑:余斗阅读:(0)字号:
    用PS给图片做后期效果制作的朋友都知道,PS中的滤镜特效有个高斯模糊,这个用来给图片做毛玻璃效果很好,比如下图,就是余斗用高斯模糊做出的一个毛玻璃效果: 利用CSS3实现图片的毛玻璃效果 原图如下: 利用CSS3实现图片的毛玻璃效果 这个效果用PS来实现非常简单,但是在前端设计中,这样的效果我们还可以通过CSS3来实现,代码也很简单,实现效果如下: 利用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毛玻璃实现微信发红包看照片
关键字词css3 毛玻璃特效
余斗余斗
  1. 转载请注明: 利用CSS3实现图片的毛玻璃效果_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2016-03-06最后更新
用jQuery实现一个网页加载时的过渡特效
前端设计中background与img的优劣对比
手机扫一扫 随身带着看
鸿运国际手机登录首页