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实现滚动条动画效果代码分享
Aug 03 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
一个用于网络的工具函数库
2006/10/09 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
浅谈php冒泡排序
2014/12/30 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python的词法分析与语法分析
2013/05/18 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
社区学习十八大感想
2014/01/22 职场文书
2015年考研复习计划
2015/01/19 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
现役军人家属慰问信
2015/03/24 职场文书
Python+Appium新手教程
2021/04/17 Python