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

Goat恶霸詹姆斯2024-07-12 13:26

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

思路：

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

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

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

参考代码：

html 复制代码

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