当前位置: 首页 > news >正文

css实现渐进中嵌套渐进的方法

 这是我们想要的实现效果:

思路:

1.有一个底色的背景渐变 

2.需要几个小的块级元素做绝对定位通过渐变+filter模糊来实现

注意:这里的采用的定位方法,所以在内部的元素一律要使用绝对定位,否则会出现层级的问题,z-index只有在定位元素有效。

参考代码:

<view class="position-relative border-rd-20rpx mb-28rpx h-350rpx"style="background: linear-gradient(0deg, #FFE7B7 0%, #FF663C 100%);overflow: hidden;"><view class="h-100%"><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(30deg);"class="w-150rpx top-28rpx h-100rpx left--20rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-150rpx top--80rpx h-100rpx right-36rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background:#FF2F2F;border-radius: 50% / 40%;filter: blur(10px);transform: rotate(-90deg);"class="w-150rpx top--10rpx h-80rpx right--60rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-70rpx top-80rpx h-70rpx right--30rpx mt-20rpx position-absolute z-index:-1"></view></view></view>

 

相关文章:

css实现渐进中嵌套渐进的方法

这是我们想要的实现效果&#xff1a; 思路&#xff1a; 1.有一个底色的背景渐变 2.需要几个小的块级元素做绝对定位通过渐变filter模糊来实现 注意&#xff1a;这里的采用的定位方法&#xff0c;所以在内部的元素一律要使用绝对定位&#xff0c;否则会出现层级的问题&…...

JavaWeb后端学习

Web&#xff1a;全球局域网&#xff0c;万维网&#xff0c;能通过浏览器访问的网站 Maven Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建Java项目的工具 作用&#xff1a; 依赖管理&#xff1a;方便快捷的管理项目以来的资源&#xff08;jar包&#xff09;&am…...

VUE_TypeError: Cannot convert a BigInt value to a number at Math.pow 解决方法

错误信息 TypeError: Cannot convert a BigInt value to a number at Math.pow vue 或 react package.json添加 "browserslist": {"production": ["chrome > 67","edge > 79","firefox > 68","opera >…...

Linux下mysql数据库的导入与导出以及查看端口

一&#xff1a;Linux下导出数据库 1、基础导出 要在Linux系统中将MySQL数据库导出&#xff0c;通常使用mysqldump命令行工具。以下是一个基本的命令示例&#xff0c;用于导出整个数据库&#xff1a; mysqldump -u username -p database_name > export_filename.sql 其中&a…...

Open3d入门 一文读懂三维点云

三维点云技术的发展始于20世纪60年代&#xff0c;随着激光雷达和三维扫描技术的进步&#xff0c;在建筑、考古、地理信息系统和制造等领域得到了广泛应用。20世纪90年代&#xff0c;随着计算机处理能力的提升&#xff0c;点云数据的采集和处理变得更加高效&#xff0c;推动了自…...

pyinstaller系列教程(一)-基础介绍

1.介绍 PyInstaller是一个用于将Python应用程序打包为独立可执行文件的工具&#xff0c;它支持跨平台操作&#xff0c;包括Windows、Linux和MacOS等操作系统。特点如下&#xff1a; 跨平台支持&#xff1a;PyInstaller可以在多个操作系统上运行&#xff0c;并生成相应平台的可…...

echarts图表:类目轴

category 类目轴&#xff0c;适用于离散的类目数据。 例如商品名称、时间等。 类目轴上的每个刻度代表一个类目&#xff0c;刻度之间没有量的关系&#xff0c;只是简单的分类。 在类目轴上&#xff0c;数据点会对应到相应的类目上。...

SSM贫困生申请管理系统-计算机源码84308

摘要 随着教育信息化的不断推进&#xff0c;越来越多的高校开始借助信息技术手段提升贫困生申请管理的效率与准确性。为此&#xff0c;我们设计并实现了SSM贫困生申请管理系统&#xff0c;旨在通过信息化手段优化贫困生申请流程&#xff0c;提高管理效率&#xff0c;为贫困生提…...

[C++]——同步异步日志系统(5)

同步异步日志系统 一、日志消息格式化设计1.1 格式化子项类的定义和实现1.2 格式化类的定义和实现 二、日志落地类设计2.1 日志落地模块功能实现与测试2.2 日志落地模块功能功能扩展 一、日志消息格式化设计 日志格式化模块的作用&#xff1a;对日志消息进行格式化&#xff0c…...

Qt项目:基于Qt实现的网络聊天室---TCP服务器和token验证

文章目录 TCP服务器设计客户端TCP管理者ChatServerAsioIOServicePoolSession层LogicSystem总结 token验证模块完善protoStatusServer验证token客户端处理登陆回包用户管理登陆界面 本篇完成的模块是TCP服务器的设计和token验证 TCP服务器设计 客户端TCP管理者 因为聊天服务要…...

深入理解C++构造函数

目录 1.引言 2.默认构造函数 3.自定义构造函数 4.带继承关系类的构造函数 5.带多重继承关系类的构造函数 6.带虚继承关系类的构造函数 7.总结 1.引言 对于学过C的来说&#xff0c;构造函数是非常熟悉不过的了。但是你真正了解它吗&#xff1f;构造函数内部初始化变量的顺…...

J025_斗地主游戏案例开发(简版)

一、需求描述 完成斗地主游戏的案例开发。 业务&#xff1a;总共有54张牌&#xff1b; 点数&#xff1a;3、4、5、6、7、8、9、10、J、Q、K、A、2 花色&#xff1a;黑桃、红桃、方片、梅花 大小王&#xff1a;大王、小王 点数分别要组合4种花色&#xff0c;大小王各一张。…...

路径规划 | 飞蛾扑火算法求解二维栅格路径规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 路径规划 | 飞蛾扑火算法求解二维栅格路径规划&#xff08;Matlab&#xff09;。 飞蛾扑火算法&#xff08;Firefly Algorithm&#xff09;是一种基于自然界萤火虫行为的优化算法&#xff0c;在路径规划问题中也可以应…...

优化Cocos Creator 包体体积

优化Cocos Creator 包体体积 引言一、优化图片文件体积&#xff1a;二、优化声音文件体积&#xff1a;三、优化引擎代码体积&#xff1a;四、 优化字体字库文件大小&#xff1a; 引言 优化Cocos Creator项目的包体体积是一个常见且重要的任务&#xff0c;尤其是在移动设备和网…...

TCPDump协议分析工具

TCPDump协议分析工具 TCPDump是一个强大的命令行工具&#xff0c;用于捕获和分析网络数据包。它能够实时监控和记录网络流量&#xff0c;帮助网络管理员和安全专家排查网络问题、分析流量和检测网络攻击。以下是TCPDump的详细介绍&#xff0c;包括其安装、基本使用、过滤规则和…...

土壤分析仪:解密土壤之奥秘的科技先锋

在农业生产和生态保护的道路上&#xff0c;土壤的质量与状况一直是我们关注的焦点。土壤分析仪&#xff0c;作为现代科技在农业和环保领域的杰出代表&#xff0c;以其高效、精准的分析能力&#xff0c;为我们揭示了土壤的奥秘&#xff0c;为农业生产提供了科学指导&#xff0c;…...

计算1的数量

1. 计算1的数量 题目ID&#xff1a;9809必做题100分 最新提交&#xff1a; Accepted 100 分 历史最高&#xff1a; Accepted 100 分 时间限制: 1000ms 空间限制: 524288kB 题目描述 给定一个n*m的二进制矩阵&#xff0c;请你数一数矩阵中完全被0上下左右包围的1的数…...

Linux udp编程

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…...

【开源项目】Rust开发复制文件夹目录结构工具

说明 由于我经常需要在多个大容量的移动硬盘中查找和新增文件&#xff0c;我希望把硬盘的目录结构放到服务器的自建网盘中&#xff0c;因此开发了这个工具&#xff0c;使得在不同硬盘之间的文件管理变得更加便捷 项目地址&#xff1a;https://github.com/VinciYan/folder_clon…...

PostgreSQL的pg_dirtyread工具

PostgreSQL的pg_dirtyread工具 pg_dirtyread 是一个第三方PostgreSQL扩展&#xff0c;它允许用户读取数据库文件中的“脏”数据&#xff0c;即那些被标记为删除或不再可见的数据。这个扩展对于数据恢复和调试非常有用&#xff0c;尤其是在需要恢复被删除或更新前的数据时。 以…...

优艾智合冲刺港股:年营收3.4亿亏3.8亿 蓝驰与真格是股东

雷递网 雷建平 4月3日合肥优艾智合机器人股份有限公司&#xff08;简称&#xff1a;“优艾智合”&#xff09;日前更新招股书&#xff0c;准备在港交所上市。年营收3.4亿 亏损3.8亿优艾智合是一家工业具身智能科技公司&#xff0c;为半导体、能源化工、锂电、3C及其他制造、公用…...

OpenClaw性能调优:Qwen3-14B并发请求处理最佳实践

OpenClaw性能调优&#xff1a;Qwen3-14B并发请求处理最佳实践 1. 为什么需要性能调优&#xff1f; 去年冬天&#xff0c;当我第一次在本地部署OpenClaw对接Qwen3-14B模型时&#xff0c;遇到了一个尴尬的问题——每当并发请求超过5个&#xff0c;系统就会开始出现响应延迟和任…...

芯片行业的高门槛本质上是一次性固定成本极高导致的

AI 工具这波热潮里&#xff0c;芯片圈有个声音&#xff1a;以后一个人能不能做一颗芯片&#xff1f;很多人讨论的时候跑偏了&#xff0c;一直在聊人效、聊 AI 能替代多少工程师。真正的瓶颈根本不在这里。做过项目的人都知道&#xff0c;一个芯片项目的成本结构大概长这样&…...

EnviroDIY_DS3231库详解:DS3231高精度RTC驱动与低功耗唤醒实践

1. EnviroDIY_DS3231 库深度解析&#xff1a;面向嵌入式数据采集系统的高精度RTC驱动实践1.1 库定位与工程价值EnviroDIY_DS3231 是一个专为 Arduino 生态设计的 DS3231 实时时钟&#xff08;RTC&#xff09;驱动库&#xff0c;其核心目标并非简单封装 IC 通信&#xff0c;而是…...

光储并网直流微电网仿真模型(matlab/simulink,2018),包含: 1.MPPT模块

光储并网直流微电网仿真模型&#xff08;matlab/simulink&#xff0c;2018&#xff09;&#xff0c;包含&#xff1a; 1.MPPT模块&#xff0c;实现光伏输入最大功率跟踪&#xff1b; 2.储能电池模块&#xff1b; 3.超级电容模块&#xff1b; 控制策略简介&#xff1a; 糸统使用…...

**发散创新:基于同态加密的隐私保护计算在Python中的实战实现**随

发散创新&#xff1a;基于同态加密的隐私保护计算在Python中的实战实现 随着数据安全需求的不断升级&#xff0c;同态加密&#xff08;Homomorphic Encryption&#xff09; 正从理论走向落地。它允许对加密数据直接进行计算&#xff0c;结果解密后与明文计算一致——这为云计算…...

ORA-12518:Oracle 监听程序无法分发客户端连接原因及解决方法

本文主要讲解ORA-12518:Oracle监听程序无法分发客户端连接的原因分析及解决方法。问题描述数据中台的同步任务有时会报错如下&#xff1a;ORA-12518, TNS:listener could not hand off client connection。意即Oracle监听程序无法分发客户端连接&#xff0c;原因分析只是有时候…...

GRS认证实操干货:TC交易证书全流程解析(源头供应商必看)

一、前言&#xff1a;GRS证书与TC的核心关联&#xff08;新手必懂&#xff09;在再生行业GRS认证体系中&#xff0c;多数源头供应商存在一个核心认知误区&#xff1a;认为拿到GRS范围证书&#xff08;SC&#xff09;就完成了合规闭环&#xff0c;实则不然。GRS证书&#xff08;…...

2025最权威的降AI率助手推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 背景是人工智能生成内容越来越普及&#xff0c;降AIGC工具因此出现&#xff0c;目的是降低文…...

考虑浆液黏度时变性与重力效应的注浆压力作用下隧道围岩变形的流固耦合动态分析模型 基于6.1版本...

考虑浆液黏度时变性与重力效应的注浆压力作用下隧道围岩变形的流固耦合动态分析模型 基于6.1版本 可视化结果&#xff1a;位移大小&#xff08;时间、应力不同而不同&#xff09;、应力分布、 打开COMSOL 6.1新建模型时&#xff0c;突然发现隧道注浆模拟要考虑浆液黏度的时间变…...