动态磨砂玻璃渐变背景

news2024/11/23 12:11:14

网页特效代码合集

动态磨砂玻璃渐变背景

妙用滤镜构建高级感拉满的磨砂玻璃渐变背景

一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的。
在这里插入图片描述

这个效果使用 CSS 其实也可以非常轻松制作出来。本文就讨论讨论:

  • 使用 CSS 如何制作如上所示磨砂(毛玻璃)质感效果的渐变背景图

  • 如何借助 CSS-doodle 工具,批量产生该效果图,并且附带动画效果

实现渐变图

上述背景效果看似复杂,其实非常的简单。它就是:

多块不规则渐变背景 + 高斯模糊蒙版

在 CSS 中,也就是借助 background + backdrop-filter: blur() 即可实现。

去掉叠在上方的 高斯模糊蒙版,背后的元素其实非常简单明了。可能就是只是这样:
在这里插入图片描述

这里简单列下代码,我们使用了 3 个 div 实现了 3 个渐变图,每个图形再使用 clip-path 随机裁剪成不规则的多边形:

<div class="bg2" style="width: 300px;height: 200px;overflow: hidden;">
    <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)

.bg2::before {
        content: "";
        position: fixed;
        width: 300px;
        height: 200px;
        backdrop-filter: blur(30px);
        z-index: 1;
    }
}

这样,我们就实现了如上图所示的毛玻璃质感效果的渐变背景图:

在这里插入图片描述

注意,这里使用的是 backdrop-filter: blur(),而不是 filter: blur()

借助 CSS-doodle 工具,批量产生该效果

简单了解了原理之后,我们就可以借助 CSS-doodle 尝试批量来生成这个效果了。

CSS-doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,并且提供各种便捷的指令及函数(随机、循环等等),让我们能通过一套规则,得到不同 CSS 效果。感兴趣的可以猛击官网了解

代码非常简单,也非常好理解,就是随机场景不同尺寸、不同定位、不同颜色、不同形式的几个图形:

<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>

这样,我们就得到了带动画的毛玻璃渐变背景:
请添加图片描述

点击刷新实现代码:

const doodle = document.querySelector('css-doodle');

document.addEventListener('click', function(e) {
  doodle.update();
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/91225.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WIN10环境下 MYSQL免安装版配置

之前用的旧版本Mysql&#xff0c;还安装Workbench,感觉很冗余&#xff0c;卸了重装一个免安装版&#xff0c; 1、 MYSQL下载解压 MySQL官网下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 点击Download下载免安装版&#xff0c;并进行解压 2、配置环…

02.Ioc容器加载过程-Bean的生命周期源码深度剖析

Spring源码编译教程 Spring IoC容器的加载过程 1.实例化化容器&#xff1a;AnnotationConfigApplicationContext &#xff1a; // 加载spring上下文 AnnotationConfigApplicationContext context new AnnotationConfigApplicationContext(MainConfig.class);AnnotationConfi…

24岁程序媛实现了人生第一个小目标 | 2022年终总结

前言 大家好&#xff0c;我是伊人a。2022这一年我实现了人生中的第一个小目标-25岁前能够全款拿下宝马3系。耶比耶比&#x1f389;&#x1f389;&#x1f389; 2022年我是一个满眼星辰的的攀登者。 满眼星辰指的是我对未来充满希望且笃定不移&#xff0c; 攀登者指的是我在…

策略模式(State)

参考&#xff1a; 策略设计模式 (refactoringguru.cn) [5. 策略模式 — Graphic Design Patterns (design-patterns.readthedocs.io)](https://design-patterns.readthedocs.io/zh_CN/latest/behavioral_patterns/state.html) [design-patterns-cpp/Strategy.cpp at master …

[附源码]Node.js计算机毕业设计高校教务管理系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…

从零开始搭建Vue3.0项目

从零开始搭建Vue3.0项目所使用的软件及工具&#xff0c;环境1.确保本机已安装nodejs和npm2.Vue-cli项目搭建所使用的软件及工具&#xff0c;环境 软件vscode&#xff1a; vscode地址下载&#xff0c; svn集中式管理&#xff1a; 是一个开源的代码版本控制系统&#xff0c;用于…

谷歌PR权重是什么意思?如何查询网站的谷歌PR权重

谷歌PR权重是什么意思&#xff1f; Google权重是SEO中的一个常见名词&#xff0c;谷歌权重最早的概念指的是GooglePageRank&#xff0c;简称谷歌的PR值&#xff0c;由网站的外链数据计算得出。 PR值的出现&#xff0c;导致很多人只注重做外链&#xff0c;忽略了网站自身…

认识文件、文件路径、File类

认识文件、文件路径、File类一、认识文件1.1 狭义与广义1.2 树型结构组织和目录1.3 其他相关知识二、文件路径 (Path)三、File类3.1 构造方法3.2 文件元信息操作方法3.3 代码示例一、认识文件 1.1 狭义与广义 狭义的文件&#xff1a; 存储在硬盘上的数据&#xff0c;以"…

DBSyncer

DBSyncer是一款开源的数据同步中间件&#xff0c;提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务&#xff0c;提供监控全量和增量数据统计图、应用性能预警等。 特点 组合驱动&#xff0c;自定义…

Git——Windows平台创建github私有仓库详解

目录 1. 注册github&#xff0c;登录 1.1 注册 1.2 登录 2. 创建仓库 3. GitBash使用 3.1 UI界面下载 3.2 配置本地 3.3 配置github 4. 托管 1. 注册github&#xff0c;登录 官网 GitHub 1.1 注册 1.2 登录 2. 创建仓库 根据需要选择&#xff1a; 3. GitBash使用 3…

【从零开始学习深度学习】24.神经网络中池化层的作用:最大池化与平均池化

在之前二维卷积层介绍的图像物体边缘检测应用中&#xff0c;我们构造卷积核从而精确地找到了像素变化的位置。设任意二维数组X的i行j列的元素为X[i, j]。如果我们构造的卷积核输出Y[i, j]1&#xff0c;那么说明输入中X[i, j]和X[i, j1]数值不一样。这可能意味着物体边缘通过这两…

[附源码]计算机毕业设计的网上点餐系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis MavenVue等等组成&#xff0c;B/S模式…

自动控制原理笔记-自动控制的一般概念

目录 概念&#xff1a; 自动控制系统的基本组成&#xff1a; 基本控制方式: 一个控制系统的方框图:&#xff08;由工作原理图绘制方框图&#xff09; 控制系统的组成&#xff1a; 小结: ​​​​​​​ ​​​​​​​ ​​​​​​​ 梦开始的地方…

微火:AI绘图网站程序源码搭建,定制专属的ai绘画小程序

随着AI绘画的火热&#xff0c;群众对于AI绘画的需求与日俱增&#xff0c;目前已有的小程序、ai绘图软件已不能很好地满足当下用户的画图需求&#xff0c;经常排队生图&#xff0c;一排就是几个小时&#xff0c;或者前面直接8万人排队的现象早日屡见不鲜。 新的优秀的AI绘画小程…

java的序列化与反序列化

什么是序列化与反序列化 序列化&#xff1a; 说白了&#xff0c;就是把一个实现了Serializable接口&#xff08;只有实现了这个接口的类才能被序列化与反序列化&#xff09;的类去变成本地文件保存。 反序列化&#xff1a; 说白了&#xff0c;就是把上面保存的本地文件&#…

LeetCode62. 不同路径(java解法——动态规划)

1 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。问总共有多少条不同的路径&#xff1f…

电脑一键重装一直在系统优化升级怎么办

小白一键重装一直在系统优化升级怎么办?电脑总是卡在这个画面上&#xff0c;遇到这种情况该怎么解决呢?遇到这种情况大家也不要慌&#xff0c;小面小编就来演示下如何解决小白一键重装一直在系统优化升级的问题。 工具/原料&#xff1a; 系统版本&#xff1a;win10家庭版 …

电脑免费录屏软件哪个好用?分享3款,亲测好用

相比于图片&#xff0c;视频给人的感受更加通俗易懂&#xff0c;短短几分钟的视频&#xff0c;就能将几十张图片想要表达的意思给表达出来。电脑录屏正是制作视频的其中一部分&#xff0c;但也有不少的小伙伴对于电脑录屏不太熟悉&#xff0c;希望小编分享一些电脑免费录屏软件…

HTML语法学习以及作业解答

文章目录技巧html标签练习作业01作业02作业03作业04作业05作业06作业07作业08作业09作业10技巧 1 输入 html5即可补全出html的骨架&#xff0c;或者是&#xff01; tab键 2 MDN网站&#xff1a;https://developer.mozilla.org/zh-CN/ 3 div带回车&#xff0c;span后面不带回…

计组 | DRAM芯片、多模块存储器、加法器标志位、软件硬件的关系、扩展操作码、程序转换过程

内容来自 —— 王道 自用学习笔记整理 一、DRAM芯片与内存条 1.1、DRAM芯片 1.2、访问内存时DRAM芯片读取过程 多个芯片并行传输,每一轮每个芯片的行列都相同,n个芯片就会有n个超元 n个超元加起来就是数据总线的长度,如图中超元=8位,数据总线=8个超元=64位 1.3、DRAM引脚数…