利用CSS3实现毛玻璃效果示例源码


Posted in HTML / CSS onSeptember 25, 2016

先来看看效果图

利用CSS3实现毛玻璃效果示例源码

复制代码
代码如下:

body {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 serif;
background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
background: hsla(0,0%,100%,.3);
}</p> <p><main>……</main>

去掉那些式样方面的代码,上面实现毛玻璃效果的核心代码如下:

复制代码
代码如下:

body {

background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {

background: hsla(0,0%,100%,.3);
}

当然这个效果离我们的期望还有点距离,因为单纯的30%的透明度会让文字变的难以阅读。对页面来说背景图只是起美化作用,文字才是最核心的。你可以增大透明度的百分比,但这样页面会显得很死板。为了让文字便于阅读,又保持页面的生动活泼,可以对上面的mian标签的背景做模糊处理。

你可能尝试blur滤镜,但可惜的是效果不对:

利用CSS3实现毛玻璃效果示例源码

复制代码
代码如下:

main {

-webkit-filter: blur(3px);
filter: blur(3px);
}

用blur滤镜会将文字也模糊掉,更看不清了,只能放弃。正确的做法是给mian标签增加伪元素::before,在伪元素上使用blur滤镜:(为了效果演示,加上了红色背景色)

利用CSS3实现毛玻璃效果示例源码

复制代码
代码如下:

main {
position: relative;

}
main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(255,0,0,.5);
}

可以看出blur效果是出来了,但导致了两个问题。首先由于blur出现了外阴影,这个比较好解决,只要加上overflow: hidden;就行了。其次四周20px的模糊半径范围内模糊效果会逐渐消退。如果对此比较介意,想让四周的模糊效果和中间一样,可以将伪元素尺寸外扩20px,为了保险起见,可以稍微再外扩一点到30px:

利用CSS3实现毛玻璃效果示例源码

复制代码
代码如下:

main {

overflow: hidden;
}
main::before {

margin: -30px;
}

最后将伪元素的红色背景色替换成body的背景图即可,效果如下。

利用CSS3实现毛玻璃效果示例源码

总结
以上就是CSS3实现毛玻璃效果的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 #HTML / CSS
纯DOM+CSS3实现简单的小风车动画
Sep 27 #HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 #HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 #HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 #HTML / CSS
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 #HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 #HTML / CSS
You might like
提问的智慧(2)
2006/10/09 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python pickle模块用法实例
2015/04/14 Python
python迭代器与生成器详解
2016/03/10 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python 字典的打印实现
2019/09/26 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
如何客观的进行自我评价
2013/12/17 职场文书
《落花生》教学反思
2014/02/25 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
企业介绍信范文
2015/01/30 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
python实现简单的井字棋
2021/05/26 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python