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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
详解Python如何生成词云的方法
2018/06/01 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
英语故事演讲稿
2014/04/29 职场文书
商超业务员岗位职责
2015/02/13 职场文书
通知函格式范文
2015/04/27 职场文书
辩护词范文大全
2015/05/21 职场文书
高中运动会前导词
2015/07/20 职场文书
心理健康教育主题班会
2015/08/13 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python