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

Qensq

已于 2023-10-16 22:37:37 修改

阅读量676

点赞数

文章标签：微信小程序小程序

于 2023-10-16 22:02:41 首次发布

本文链接：https://blog.csdn.net/Qensq/article/details/133870608

版权

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

一、创建小程序组件

二、代码

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