利用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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
css弧边选项卡的项目实践
May 07 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
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
Python函数返回值实例分析
2015/06/08 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python能做什么
2020/06/02 Python
python try...finally...的实现方法
2020/11/25 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
乡下人家教学反思
2014/02/01 职场文书
加强作风建设工作总结
2014/10/23 职场文书
长城英文导游词
2015/01/30 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
商业计划书格式、范文
2019/03/21 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL