妙用 CSS 构建花式透视背景效果
本文将介绍一种巧用 background
配合 backdrop- filter
来构建有趣的透视背景效果的方式。
本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果:
仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒化:
准确而言,是一种基于颗粒化的毛玻璃效果,元素首先是被颗粒化,其次,元素的边缘也是在一定程度上被虚化了。那么,我们该如何实现这个效果呢?
需求拆解
上述效果看似神奇,其实原理也非常简单。主要就是颗粒化的背景 background加上backdrop-filter: blur()
即可。
首先,我们需要实现颗粒背景。
我们利用 background
实现这样一个背景:
<div></div>
div {
background: radial-gradient(transparent, #000 20px);
background-size: 40px 40px;
}
从透明到黑色的径向渐变效果如下:
需要注意的是,图里的白色部分其实透明的,可以透出背后的背景。此时,如果背景后面有元素,效果就会是这样:
好,我们将 background: radial-gradient(transparent, #000 20px)
中的黑色替换成白色,效果如下:
这里为了展示原理,每个径向渐变的圆设置的比较大,我们把它调整回正常大小:
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
}
这样,我们就成功的将背景颗粒化:
当然,此时透出的背景看上去非常生硬,也不美观,所以,我们还需要 backdrop-filter: blur()
,我们加上一个试试看:
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
backdrop-filter: blur(10px);
}
这样,我们就实现了一开始所展示的效果:
这里需要注意的是,background-size
的大小控制,和不同的 backdrop-filter: blur(10px)
值,都会影响效果。
完整的 DEMO,你可以戳这里:CodePen Demo -- Mask Filter
当然,掌握了这个技巧之后,我们可以尝试替换掉 background: radial-gradient()
图形,及改变 background-size
,尝试各种不同形状的透视背景。简单举几个例子:
div {
background: linear-gradient(45deg, transparent, #fff 4px);
background-size: 6px 6px;
backdrop-filter: saturate(50%) blur(4px);
}
这里使用了 linear-gradient()
替换了 radila-gradient()
:
最后
一个非常小的技巧,运用在恰当的地方可以很好的提升页面的质感,你学会了吗?
本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
妙用 CSS 构建花式透视背景效果的更多相关文章
- 使用 CSS 构建强大且酷炫的粒子动画
粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画.传统的粒子动画主要由 Canvas.WebGL 实现. 当然,不使用 HTML + CSS 的主要原因在于,粒子动画通常需要较多的粒子,而如 ...
- DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)
前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...
- 妙用 background 实现花式文字效果
本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果.通过本文,你将可以学到: 通过 background-size 与 background-position 实现酷炫的 ...
- 巧用 CSS 构建渐变彩色二维码
今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维 ...
- js css 构建滚动边框
注:预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接. 完整代码 <!DOCTYPE html> <html xmlns="http://www.w3. ...
- 排行榜妙用——CSS计数器
碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?
- HTML&CSS构建和设计网站
1.a链接:两个特性,href.target,href里添加mailto:邮箱可以直接链接到其它人的邮箱,添加#id,可以把窗口位置直接定位到该id的元素位置, target:_black可以在新的窗 ...
- Html,css构建一个对话框,练习201911281028
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
https://electronjs.org/ —— 官网 https://github.com/electron/electron-api-demos/releases —— 下载demo 下载安装 ...
随机推荐
- 385. Mini Parser - LeetCode
Question 385. Mini Parser Solution 分析:用NI(count,list)来表示NestedInteger,则解析字符串[123,[456,[789]]]过程如下: # ...
- unity---寻路导航
寻路导航 1. 简单的寻路 先搭建出类似下面的结构 将你想作为障碍的物体放入一个空物体中 进入空物体点击Static,仅勾选 Navigation Static 即可 依次点击 Window-> ...
- unity---射线
射线 Ray ray= Camera.main.ScreenPointToRay(Input.mousePosition);//获得鼠标射向的射线 RaycastHit hit;//射线碰撞物体 if ...
- python面向对象双下划线方法与元类
目录 双下划线方法(__) 元类简介 产生类的两种表现形式 元类的基本使用 元类进阶操作 __new__方法 双下划线方法(__) 面向对象中的双下方法也有一些人称之为是魔法方法,有些双下方法不需要刻 ...
- 目标检测复习之Anchor Free系列
目标检测之Anchor Free系列 CenterNet(Object as point) 见之前的过的博客 CenterNet笔记 YOLOX 见之前目标检测复习之YOLO系列总结 YOLOX笔记 ...
- 负载均衡之keepalived
DR实验存在的隐患 DR可能会挂,单点故障 RS可能会挂 解决方案: 解决单点故障 主备:准备多个DR备用机,做好配置,主机挂掉备用机顶上 主主 解决RS会挂的问题 给RS发送请求,如果收到200 o ...
- static关键字——JavaSE基础
static关键字 由于static跟随类被加载,因此静态代码块.构造方法.匿名代码块的执行顺序为静态代码块→匿名代码块→构造方法 public class Demo01 { public stati ...
- 多路分支、for循环
多路分支 多路分支也叫做switch语句,它的格式: switch (控制表达式){ case 条件: 输出....} switch 可以看成一种跳转,每当我们满足跳转就会跳转到响应的位置,接下我们写 ...
- 云原生存储解决方案Rook-Ceph与Rainbond结合的实践
基础不牢,地动山摇.无论是何种体系架构,底层存储的选择都是一个值得探讨的话题.存储承载着业务的数据,其性能直接影响到业务应用的实际表现.也正因为存储和业务的数据关联紧密,其可靠性也必须得到关注,存储的 ...
- 1.设计模式第一步-《设计模式从头到脚舔一遍-使用C#实现》
更新记录: 完成第一次编辑:2022年4月23日20:29:33. 加入小黄人歌曲:2022年4月23日21:45:36. 1.1 设计模式(Design Pattern)是什么 设计模式是理论.是前 ...