微信小程序仿苹果负一屏由弱到强的高斯模糊

进入下面小程序可以体验效果，然后进入更多。查看模糊效果

一、创建小程序组件

二、代码

wxml:

<view class="topBar-15"></view>
<view class="topBar-14"></view>
<view class="topBar-13"></view>
<view class="topBar-12"></view>
<view class="topBar-11"></view>
<view class="topBar-10"></view>
<view class="topBar-9"></view>
<view class="topBar-8"></view>
<view class="topBar-7"></view>
<view class="topBar-6"></view>
<view class="topBar-5"></view>
<view class="topBar-4"></view>
<view class="topBar-3"></view>
<view class="topBar-2"></view>
<view class="topBar-1"></view>

wxss:

.topBar-1{position: absolute;width: 100%;height: 190rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(29, 29, 29, 0.001)
}
.topBar-2{position: absolute;width: 100%;height: 170rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.002)
}
.topBar-3{position: absolute;width: 100%;height: 175rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.003)
}
.topBar-4{position: absolute;width: 100%;height: 170rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.004)
}
.topBar-5{position: absolute;width: 100%;height: 165rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(19, 2, 2, 0.005)
}
.topBar-6{position: absolute;width: 100%;height: 160rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.006)
}
.topBar-7{position: absolute;width: 100%;height: 155rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.007)
}
.topBar-8{position: absolute;width: 100%;height: 150rpx;z-index: 150;backdrop-filter: blur(1px);background-color: rgba(255, 255, 255, 0.008)
}
.topBar-9{position: absolute;width: 100%;height: 145rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.009)
}.topBar-10{position: absolute;width: 100%;height: 140rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.010)
}.topBar-11{position: absolute;width: 100%;height: 130rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.011)
}.topBar-12{position: absolute;width: 100%;height: 120rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.012)
}
.topBar-13{position: absolute;width: 100%;height: 110rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.013)
}
.topBar-14{position: absolute;width: 100%;height: 100rpx;z-index: 150;backdrop-filter: blur(2px);background-color: rgba(255, 255, 255, 0.014)
}
.topBar-15{position: absolute;width: 100%;height: 90rpx;z-index: 150;backdrop-filter: blur(5px);background-color: rgba(255, 255, 255, 0.015)
}