欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > CSS3实现图片的毛玻璃视觉效果
这篇文章主要为大家详细介绍了CSS3实现图片的毛玻璃视觉效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

在网页制作过程中我们会遇到很多不一样的要求,例如今天361源码要给大家介绍的这一种:通过CSS实现图片雾蒙蒙的像磨砂玻璃一样的效果。用PS给图片做后期效果制作的朋友都知道,PS中的滤镜特效有个高斯模糊,这个用来给图片做毛玻璃效果很好,比如下图,就是361源码用高斯模糊做出的一个毛玻璃效果:

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

    原图如下:

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

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

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

具体代码如下:

HTML代码:

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

CSS代码:

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

大功告成。

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 毛玻璃 图片视觉

上一篇PHP生成TXT直接点击下载 PHP将文本导出到TXT

下一篇微信“对方正在输入……”在这种情况下才显示!

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在