利用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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 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
PHP HTML代码串 截取实现代码
2009/06/29 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
明星员工获奖感言
2014/08/14 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
英文自荐信范文
2015/03/25 职场文书
离婚案件被告代理词
2015/05/23 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL