最近,咱们外部的一个低代码平台竣工上线,它的首页大略是这样子(数据脱敏):
当然,这个不是我的项目不是本文的重点。次要看看这个页面的背景,一个磨砂(毛玻璃)质感成果的突变背景图,看上去是比拟高级的。
剥离掉页面的内容元素,只剩下背景的话,大略是这样:
一开始是打算切图实现的,然而认真一想,这个成果应用 CSS 其实也能够十分轻松制作进去。本文就探讨探讨:
- 应用 CSS 如何制作如上所示磨砂(毛玻璃)质感成果的突变背景图
- 如何借助 CSS-doodle 工具,批量产生该效果图,并且附带动画成果
实现突变图
上述背景成果看似简单,其实十分的简略。它就是:
多块不规则突变背景 + 高斯含糊蒙版
在 CSS 中,也就是借助 background
+ backdrop-filter: blur()
即可实现。
去掉叠在上方的 高斯含糊蒙版,背地的元素其实十分简单明了。可能就是只是这样:
这里简略列下代码,咱们应用了 3 个 div 实现了 3 个突变图,每个图形再应用 clip-path
随机裁剪成不规则的多边形:
<div class="g-bg">
<div class="g-polygon g-polygon-1"></div>
<div class="g-polygon g-polygon-2"></div>
<div class="g-polygon g-polygon-3"></div>
</div>
.g-polygon {
position: absolute;
opacity: .5;
}
.g-polygon-1 {
// 定位代码,容器高宽随便
background: #ffee55;
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}
.g-polygon-2 {
// 定位代码,容器高宽随便
background: #E950D1;
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}
.g-polygon-3 {
// 定位代码,容器高宽随便
background: rgba(87, 80, 233);
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
应用 backdrop-filter
实现高斯含糊蒙版
接下来,这一步最为要害,就是应用 backdrop-filter
实现高斯含糊蒙版。叠在上述几个元素上方即可,最要害的一行代码 backdrop-filter: blur(150px)
.g-bg::before {
content: "";
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
backdrop-filter: blur(150px);
z-index: 1;
}
}
这样,咱们就实现了如上图所示的毛玻璃质感成果的突变背景图:
录制的 Gif 图看上去有点糊,你能够戳这里点进 DEMO 查看 — CodePen Demo — Frosted glass background effect
留神,这里应用的是 backdrop-filter: blur()
,而不是 filter: blur()
,如果你对这两个滤镜是应用抉择还有所纳闷,能够看看的我的这篇文章解说 — 深入探讨 filter 与 backdrop-filter 的异同
借助 CSS-doodle 工具,批量产生该成果
简略理解了原理之后,咱们就能够借助 CSS-doodle 尝试批量来生成这个成果了。
CSS-doodle 它是一个基于 Web-Component 的库。容许咱们疾速的创立基于 CSS Grid 布局的页面,并且提供各种便捷的指令及函数(随机、循环等等),让咱们能通过一套规定,失去不同 CSS 成果。感兴趣的能够猛击官网理解 — CSS-doodle
代码非常简单,也十分好了解,就是随机场景不同尺寸、不同定位、不同色彩、不同模式的几个图形:
<css-doodle>
:doodle {@grid: 1x8 / 100vmin;}
@place-cell: center;
width: @rand(40vmin, 80vmin);
height: @rand(40vmin, 80vmin);
transform: translate(@rand(-200%, 200%), @rand(-60%, 60%)) scale(@rand(.8, 1.8)) skew(@rand(45deg));
clip-path: polygon(@r(0, 30%) @r(0, 50%),
@r(30%, 60%) @r(0%, 30%),
@r(60%, 100%) @r(0%, 50%),
@r(60%, 100%) @r(50%, 100%),
@r(30%, 60%) @r(60%, 100%),
@r(0, 30%) @r(60%, 100%)
);
background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf);
opacity: @rand(.3, .8);
</css-doodle>
上述代码会随机生成这样的图案(GIF 看不出鼠标的点击成果,每次切换是我点击页面进行的手动切换):
好,配合上蒙版,再看看成果,咱们曾经可能批量的去生成上述的背景成果了:
如果需要,配合上 hue-rotate
及简略的位移,咱们甚至能够让这个突变背景动画动起来,更加活泼些:
<css-doodle>
// 同上...
position: relative;
top: @rand(-80%, 80%);
left: @rand(-80%, 80%);
animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate;
@keyframes colorChange {
100% {
left: 0;
top: 0;
filter: hue-rotate(360deg);
}
}
</css-doodle>
这样,咱们就失去了带动画的毛玻璃突变背景:
GIF 截图成果较差,残缺的代码及成果体验你能够猛击这里 — CodePen Demo — CSS-doodle Pure CSS Background Effect
最初
好了,本文到此结束,心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。