CSS3 毛玻璃效果


Posted in HTML / CSS onAugust 14, 2019

毛玻璃效果做的好能使页面显得非常生动立体。直接上图

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);
}

<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 毛玻璃效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
You might like
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python mysql中in参数化说明
2020/06/05 Python
python re的findall和finditer的区别详解
2020/11/15 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
电子商务网站的创业计划书
2014/01/05 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
教代会开幕词
2015/01/28 职场文书
民主生活会意见
2015/06/05 职场文书
教师素质教育心得体会
2016/01/19 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python