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

news2024/9/20 1:30:12

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

思路:

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.coloradmin.cn/o/1919508.html

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

相关文章

HCIP.ppp协议(点到点)认证阶段

ppp协议 ppp是点到点的协议 1.兼容性很好 2.可以进行认证和授权 3.可移植性强 三个阶段 1.链路协商阶段 LCP协商------去协商ppp链路会话 2.认证&#xff08;可选&#xff09; 3.NCP协商------网络层协商阶段&#xff08;根据网络层的不同NCP协议就会存在一个对应的NC…

【电子通识】无源元件与有源元件的定义和区别是什么?

当提到构成电路的电子器件时,许多人可能会想到晶体管、电容器、电感器和电阻器等器件。一般情况下,我们使用的电子器件分为两大类,即“有源元件”和“无源元件”。 有源元件是主动影响(如放大、整流、转换等)所供给电能的元件。 无源元件是对所供给的电能执行被动…

代码随想录算法训练营Day62|冗余连接、冗余连接II

冗余连接 108. 冗余连接 (kamacoder.com) 考虑使用并查集&#xff0c;逐次将s、t加入并查集中&#xff0c;当发现并查集中find(u)和find(v)相同时&#xff0c;输出u和v&#xff0c;表示删除的边即可。 #include <iostream> #include <vector> using namespace s…

Android高级——Logger日志系统

Logger日志系统 Logger日志系统是基于内核中的Logger日志驱动程序实现将日志记录保存在内核空间中使用一个环形缓冲区来保存日志&#xff0c;满了之后&#xff0c;新的日志就会覆盖旧的日志 日志类型 main&#xff0c;记录应用程序级别system&#xff0c;记录系统级别radio&…

7月11日学习打卡,数据结构栈

大家好呀&#xff0c;本博客目的在于记录暑假学习打卡&#xff0c;后续会整理成一个专栏&#xff0c;主要打算在暑假学习完数据结构&#xff0c;因此会发一些相关的数据结构实现的博客和一些刷的题&#xff0c;个人学习使用&#xff0c;也希望大家多多支持&#xff0c;有不足之…

光伏电站逆变器选型方法

前言&#xff1a;光伏逆变器是光伏发电系统两大主要部件之一&#xff0c;光伏逆变器的核心任务是跟踪光伏阵列的最大输出功率&#xff0c;并将其能量以最小的变换损耗、最佳的电能质量馈入电网。由于逆变器是串联在光伏方阵和电网之间&#xff0c;逆变器的选择将成为光伏电站能…

SAP 物料批量执行MD02代码分享

通常我们在运行MRP的时候要么就是跑MD01整个工厂层级的,要么就是单个物料层级的MRP用MD02去单个物料去执行。 HANA后有了MRPLIVE,可以支持多物料的运行MRP,但是无法控制MRP的运行参数,根据采购类型跑出对应的单据,F跑出的采购申请,E跑出的是计划订单。 需求是要可以批量运…

JavaSE 面向对象程序设计进阶 IO 练习读取多个对象

练习读取多个对象 用序列化流将对象写入文件 import java.io.*; import java.nio.charset.Charset;public class Main {public static void main(String[] args) throws IOException, ClassNotFoundException {//序列化多个对象Person p1new Person("多多", 男,20)…

用户对生活的需求,是三翼鸟创新的起点

这两天又长知识了&#xff0c;学到了一个网络新梗&#xff1a;City不City。 它源自于一种新的打卡方式&#xff0c;用于表达对某个城市的态度或感受。比如你跟朋友在城市游荡时&#xff0c;就可以随口问句City不City啊&#xff1f;通常被释义为“洋不洋气”“ 时髦不时髦”。 …

医院同步时钟系统提供可靠的时间支持

在医院这个充满紧张与忙碌的环境中&#xff0c;每一分每一秒都关乎着患者的生命与健康。为了确保医疗服务的高效、精准和安全&#xff0c;医院同步时钟系统应运而生&#xff0c;成为了医院可靠的时间支持。 医院同步时钟系统犹如一座精准的时间堡垒&#xff0c;为医院的各个角落…

阿里云GPU服务器安装ComfyUI

连接到GPU服务器: 使用SSH客户端(如PuTTY或终端)连接到你的服务器。命令通常是: ssh usernameserver_ip安装依赖: 确保Python和Git已安装。在大多数Linux系统上,可以这样安装: sudo apt update sudo apt install python3 python3-pip git克隆ComfyUI仓库: 这步骤会下载ComfyUI的…

elasticSearch快速了解

elasticSearch&#xff1a;经常用于搜索引擎&#xff0c;我们用的百度搜索和github上的搜索都是用的搜索引擎&#xff0c;它是对输入内容进行分析&#xff0c;然后查询&#xff0c;不像数据库模糊搜索的like一样必须含用你输入的全部内容。 elasticSearch优势&#xff1a;支持…

内网安全:域内信息探测

1.域内基本信息收集 2.NET命令详解 3.内网主要使用的域收集方法 4.查找域控制器的方法 5.查询域内用户的基本信息 6.定位域管 7.powershell命令和定位敏感信息 1.域内基本信息收集&#xff1a; 四种情况&#xff1a; 1.本地用户&#xff1a;user 2.本地管理员用户&#x…

智慧营区人员考勤管理系统|DW-S406系统实现无感考勤

智慧营区人员管理系统&#xff08;DW-S406系统&#xff09;通过建设人员基本信息管理功能&#xff0c;实现人力资源可视化、规范化管理&#xff0c;使人力资源管理工作决策的高效化、制度化得到有力保障&#xff0c;真正达到集中管理、集权管理的目标。主要实现营区人员管理、访…

逻辑回归(纯理论)

1.什么是逻辑回归&#xff1f; 逻辑回归是一种常用的统计学习方法&#xff0c;主要用于解决分类问题。尽管名字中包含"回归"&#xff0c;但它实际上是一种分类算法 2.为什么机器学习需要使用逻辑回归 1.二元分类 这是逻辑回归最基本和常见的用途。它可以预测某个事…

数学建模·熵权法

熵权法 一种计算评价指标之间权重的方法。熵权法是一种客观的方法&#xff0c;没有主观性&#xff0c;比较可靠。具体定义 熵权法的核心在于计算信息熵&#xff0c;信息熵反映了一个信息的紊乱程度&#xff0c;体现了信息的可靠性具体步骤 Step1正向化处理 将所以评价指标转…

财务RPA的ROI——如何计算财务RPA的回报率

近几年各企业纷纷利用RPA加速推进数字化转型进程&#xff0c;从企业效益角度来看&#xff0c;RPA能够帮助企业节省人力和运营成本&#xff0c;实现提质增效&#xff0c;但是每个企业运营管理的实际情况多有不同&#xff0c;在实施RPA前&#xff0c;还是要仔细评估投资和效益的问…

元组列表之案例

1.列表推导式 基本语法&#xff1a; [表达式 for语句1 if 语句1 for语句2 if语句2 ........ ] 1.零到九的平方列表 a [i*i for i in range(10)] print(a) 2.for 循环前面加if else #如果是偶数乘以2&#xff0c;如果是奇数直接输出 a [i*2 if i%2 0 else i for i in ran…

Codeforces Round 954 (Div. 3)(A~D题)

A. X Axis 思路: 1~10暴力枚举一下所有可能 代码: #include<bits/stdc.h> using namespace std; #define N 1000005 typedef long long ll; typedef unsigned long long ull; ll n, m, t, h, k; ll a, b, c; ll ans, num, sum, cnt; ll temp[N], f1[N], f2[N]; bool f…

卤味江湖中,周黑鸭究竟该抓住什么赛点?

近年来&#xff0c;卤味江湖的决斗从未停止。 随着休闲卤味、佐餐卤味等细分赛道逐渐形成&#xff0c;“卤味三巨头”&#xff08;周黑鸭、绝味食品、煌上煌&#xff09;的牌桌上有了更多新对手&#xff0c;赛道变挤了&#xff0c;“周黑鸭们”也到了转型关键期。 这个夏天&a…