当前位置：首页 > 科技观察

使用CSS轻松搭建高端磨砂玻璃渐变背景

时间：2023-03-13 04:58:47 科技观察

最近我们内部的一个低代码平台完成上线了，它的首页是这样的（数据脱敏）：当然，这不是一个项目并且不是本文的重点。主要看这个页面的背景，一张渐变的背景图，带有磨砂（磨砂玻璃）纹理效果，看起来比较高级。如果把页面的内容元素剥离，只剩下背景，大概是这样的：一开始是打算把图片切掉的，但是仔细想想，这个效果其实可以很容易的用CSS。本文讨论：如何使用CSS制作渐变背景图，并带有如上图的磨砂（磨砂玻璃）纹理效果如何使用CSS-doodle工具批量生成效果图，并实现渐变图带动画效果。以上背景效果看似复杂，其实很简单。就是：CSS中的多块不规则渐变背景+高斯模糊蒙版，即借助background+backdrop-filter:blur()即可实现。去掉上面叠加的GaussianBlurmask，后面的元素其实非常简单明了。可能是这样的：下面是一段简单的代码，我们用3个div实现3个渐变图，然后用clip-path将每个图随机裁剪成不规则的多边形：

.g-polygon{position:absolute;opacity:.5;}.g-polygon-1{//定位代码，容器高宽任意background:#ffee55;clip-path:polygon(010%,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实现高斯模糊mask接下来最关键的一步就是使用backdrop-filter实现高斯模糊mask。就叠加在上面的元素之上，最关键的一行代码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查看--CodePenDemo--磨砂玻璃背景效果[1]注意这里使用的是background-filter:blur()而不是filter:blur()，如果如果你对这两个感兴趣，如果你对滤镜的使用还有疑惑，可以看看我的这篇文章——深入探讨filter和backdrop-filter的异同[2]CSS的使用-doodle工具批量生成这种效果简单了解了原理后，我们就可以使用css-doodle来尝试批量生成这种效果。CSS-doodle是一个基于Web-Component的库。让我们可以快速创建基于CSSGrid布局的页面，并提供各种方便的指令和功能（随机、循环等），让我们通过一套规则获得不同的CSS效果。有兴趣的可以点击官网了解一下——CSS-doodle[3]的代码非常简单易懂。是随机场景中的几个不同大小、不同位置、不同颜色、不同形式的图形：:doodle{@grid:1x8/100vmin;}@place-cell:center;width:@rand(40vmin,80vmin);高度:@rand(40vmin,80vmin);转换:translate(@rand(-200%,200%),@rand(-60%,60%))scale(@rand(.8,1.8))倾斜(@rand(45deg));剪辑路径:多边形(@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%));背景:@pick(#f44336,#e91e63,#9c27b0,#673ab7,#3f51b5,#60569e,#e6437d,#ebbf4d,#00bcd4,#03a9f4,#2196f3,#009688,#5ee463,#f8e645,#ffc107,#ff5722,#43f8bf);不透明度:@rand(.3,.8);上面的代码会随机生成这样一个图案（gif看不到鼠标点击效果，每次切换都是点击页面的手动切换）：好了，有了上面的mask，再看下效果，我们已经可以批量生成上面的背景效果了：如果需要的话，配合hue-rotate和simpledisplacement，我们甚至可以让这个渐变背景动画动起来，更生动：//同上...position:relative;top:@rand(-80%,80%);left:@rand(-80%,80%);动画:colorChange@rand(6.1s,16.1s)infinite@rand(-.5s,-2.5s)linearalternate;@keyframescolorChange{100%{left:0;top:0;filter:hue-rotate(360deg);}}这样，我们就得到了一个动画磨砂玻璃渐变背景：GIF截图很差，完整的你代码和效果体验可以点这里--CodePenDemo--CSS-doodle纯CSS背景效果[4]最后，本文到此结束，希望本文对你有所帮助：）参考资料[1]CodePenDemo--磨砂玻璃背景效果：https://codepen.io/Chokcoco/pen/mdBKgOK[2]深入探讨filter和backdrop-filter的异同：https://github.com/chokcoco/iCSS/issues/147[3]CSS-doodle:https://css-doodle.com/[4]CodePenDemo--CSS-doodle纯CSS背景效果:https://codepen.io/Chokcoco/pen/gOGKNMm

上一篇：冠状病毒是否影响了比特币价格？

下一篇：从人工智能到EDA，2022年软件发展趋势如何？_1

使用CSS轻松搭建高端磨砂玻璃渐变背景相关文章

最新推荐

猜你喜欢