长宁做网站价格,重庆怎么自己做网站,做简单网站怎么做,百度站长验证网站这是我们想要的实现效果#xff1a;
思路#xff1a;
1.有一个底色的背景渐变
2.需要几个小的块级元素做绝对定位通过渐变filter模糊来实现
注意#xff1a;这里的采用的定位方法#xff0c;所以在内部的元素一律要使用绝对定位#xff0c;否则会出现层级的问题… 这是我们想要的实现效果
思路
1.有一个底色的背景渐变
2.需要几个小的块级元素做绝对定位通过渐变filter模糊来实现
注意这里的采用的定位方法所以在内部的元素一律要使用绝对定位否则会出现层级的问题z-index只有在定位元素有效。 参考代码
view classposition-relative border-rd-20rpx mb-28rpx h-350rpxstylebackground: linear-gradient(0deg, #FFE7B7 0%, #FF663C 100%);overflow: hidden;view classh-100%viewstylebackground: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(30deg);classw-150rpx top-28rpx h-100rpx left--20rpx mt-20rpx position-absolute z-index:-1/viewviewstylebackground: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);classw-150rpx top--80rpx h-100rpx right-36rpx mt-20rpx position-absolute z-index:-1/viewviewstylebackground:#FF2F2F;border-radius: 50% / 40%;filter: blur(10px);transform: rotate(-90deg);classw-150rpx top--10rpx h-80rpx right--60rpx mt-20rpx position-absolute z-index:-1/viewviewstylebackground: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);classw-70rpx top-80rpx h-70rpx right--30rpx mt-20rpx position-absolute z-index:-1/view/view/view
