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%">
					<view
						style="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>
					<view
						style="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>
					<view
						style="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>
					<view
						style="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>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

61、基于卷积神经网络的手写数字旋转角度预测(matlab)

1、卷积神经网络的手写数字旋转角度预测原理及流程 基于卷积神经网络的手写数字旋转角度预测是一个常见的计算机视觉问题。在这种情况下&#xff0c;我们可以通过构建一个卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;来实现该任务。以下…

SPI协议与读写串行 FLASH

SPI 协议简介 SPI是串行外设接口&#xff08;Serial Peripheral Interface&#xff09;的缩写&#xff0c;是美国摩托罗拉公司&#xff08;Motorola&#xff09;最先推出的一种同步串行传输规范&#xff0c;也是一种单片机外设芯片串行扩展接口&#xff0c;是一种高速、全双工、…

Vue2打包部署后动态修改后端接口地址的解决方法

文章目录 前言一、背景二、解决方法1.在public文件夹下创建config文件夹&#xff0c;并创建config.js文件2.编写config.js内容3.在index.html中加载config.js4.在封装axios工具类的js中修改配置 总结 前言 本篇文章将介绍使用Vue2开发前后端分离项目时&#xff0c;前端打包部署…

LeetCode分发糖果(贪心思路分析)

题目描述 贪心思路 思路及解法 我们可以将「相邻的孩子中&#xff0c;评分高的孩子必须获得更多的糖果」这句话拆分为两个规则&#xff0c;分别处理。 左规则&#xff1a;当 ratings[i−1]<ratings[i] 时&#xff0c;i 号学生的糖果数量将比 i−1 号孩子的糖果数量多。 …

elasticsearch集群模式部署

系统版本&#xff1a;CentOS Linux release 7.9.2009 (Core) es版本&#xff1a; elasticsearch-7.6.2 本次搭建es集群为三个节点 添加启动用户 确保elasticsearch的启动用户为普通用户&#xff0c;这里我创建了es用户用于启动elasticsearch 执行命令为es用户添加sudo权限 v…

基于AT89C51单片机超声波水位液位控制系统设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 设计任务与要求 原理图 仿真图 代码 系统论文 资源下载 设计任务与要求…

【微信小程序知识点】手机号验证组件

手机验证组件&#xff0c;用于帮助开发者向用户发起手机号申请&#xff0c;必须经过用户同意后&#xff0c;才能获得由平台验证后的手机号&#xff0c;进而为用户提供相应的服务。 手机号验证组件分为两种&#xff1a;手机号快速验证组件以及手机号实时验证组件。 1.手机号快速…

内网对抗-基石框架篇单域架构域内应用控制成员组成用户策略信息收集环境搭建

知识点&#xff1a; 1、基石框架篇-单域架构-权限控制-用户和网络 2、基石框架篇-单域架构-环境搭建-准备和加入 3、基石框架篇-单域架构-信息收集-手工和工具1、工作组(局域网) 将不同的计算机按照功能分别列入不同的工作组。想要访问某个部门的资源&#xff0c;只要在“网络…

MES实时监控食品加工过程中各环节的安全

在实时监控食品加工过程中各环节的安全风险方面&#xff0c;万界星空科技的MES&#xff08;制造执行系统&#xff09;解决方案发挥了至关重要的作用。以下是具体如何通过MES系统实现实时监控食品加工过程中各环节安全风险的详细阐述&#xff1a; 一、集成传感器与实时监控 MES…

Prometheus + alermanager + webhook-dingtalk 告警

添加钉钉机器人 1. 部署 alermanager 1.1 下载软件包 wget https://github.com/prometheus/alertmanager/releases/download/v0.26.0/alertmanager-0.26.0.linux-amd64.tar.gz 网址 &#xff1a;Releases prometheus/alertmanager (github.com) 1.2 解压软件包 mkdir -pv …

博物馆地图导航系统:高精度地图引擎与AR/VR融合,实现博物馆数字化转型

在人民日益追求精神文化的时代下&#xff0c;博物馆作为传承与展示人类文明的璀璨殿堂&#xff0c;其重要性不言而喻。然而&#xff0c;随着博物馆规模的不断扩大和藏品种类的日益丰富&#xff0c;游客在享受知识盛宴的同时&#xff0c;也面临着“迷路”与“错过”的困扰。博物…

Python-PLAXIS自动化建模技术与典型岩土工程

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;您是否发现GUI界面中重复性的点击输入工作太繁琐&#xff1f;从而拖慢了设计或方案必选进程&#xff1f; 搭建自己的Plaxis模型&#xff…

flutter 列表下拉框加搜索

1.使用控件搜索加下拉框dropdown_search: ^0.4.9和获取中文拼音lpinyin: ^1.1.1 2.加入中文查询和首字查询 在当中找到相应的packages&#xff0c;再在SelectDialog.dart当中加入引入拼音搜索 import package:lpinyin/lpinyin.dart; 更改匹配方法manageItemsByFilter使其可…

云动态摘要 2024-07-12

给您带来云厂商的最新动态,最新产品资讯和最新优惠更新。 最新优惠与活动 数据库上云优选 阿里云 2024-07-04 RDS、PolarDB、Redis、MongoDB 全系产品新用户低至首年6折起! [免费体验]智能助手ChatBI上线 腾讯云 2024-07-02 基于混元大模型打造,可通过对话方式生成可视化…

Python | Leetcode Python题解之第232题用栈实现队列

题目&#xff1a; 题解&#xff1a; class MyQueue:def __init__(self):self.A, self.B [], []def push(self, x: int) -> None:self.A.append(x)def pop(self) -> int:peek self.peek()self.B.pop()return peekdef peek(self) -> int:if self.B: return self.B[-1…

基于SpringBoot+Vue的数码论坛系统(带1w+文档)

基于SpringBootVue的数码论坛系统(带1w文档) 基于SpringBootVue的数码论坛系统(带1w文档) 数码论坛系统能够通过互联网得到广泛的、全面的宣传&#xff0c;让尽可能多的用户了解和熟知数码论坛系统的便捷高效&#xff0c;不仅为用户提供了服务&#xff0c;而且也推广了自己&…

使用mybatis的statementHander拦截器监控表和字段并发送钉钉消息

新建mybatis的statementHander拦截器拦截器 类 面试题&#xff1a; 2.实现 解析Sql时引入JSqlParser JSqlParser 是一个 SQL 语句解析器。 它将 SQL转换为可遍历的 Java 类层次结构。 <dependency><groupId>com.github.jsqlparser</groupId><artifac…

C语言基础and数据结构

C语言程序和程序设计概述 程序:可以连续执行的一条条指令的集合 开发过程:C源程序(.c文件) --> 目标程序(.obj二进制文件,目标文件) --> 可执行文件(.exe文件) -->结果 在任何机器上可以运行C源程序生成的 .exe 文件 没有安装C语言集成开发环境,不能编译C语言程…

STM32的TIM1之PWM互补输出_死区时间和刹车配置

STM32的TIM1之PWM互补输出_死区时间和刹车配置 1、定时器1的PWM输出通道 STM32高级定时器TIM1在用作PWM互补输出时&#xff0c;共有4个输出通道&#xff0c;其中有3个是互补输出通道&#xff0c;如下&#xff1a; 通道1&#xff1a;TIM1_CH1对应PA8引脚,TIM1_CH1N对应PB13引…

IDEA 中的调试方式(以 java 为例)

文章目录 IDEA 中的调试方式(以 java 为例)1. 基本介绍2. 断点调试的快捷键2.1 设置断点并启动调试2.3 快捷键 IDEA 中的调试方式(以 java 为例) 在开发中查找错误的时候&#xff0c;我们可以用断点调试&#xff0c;一步一步的看源码执行的过程&#xff0c;从而发现错误所在。 …