当前位置: 首页 > 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;尤其是在需要恢复被删除或更新前的数据时。 以…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...