微信小程序如何制作全屏高斯模糊毛玻璃特效

富士山下这首歌意思是喜欢上一个人，就好像是喜欢上了富士山一样。你搬不走它，所以，你只能向它靠近。爱不是占有，而是追随，是一种心甘情愿的自我改变

想法

在联系上文《微信小程序自定义tabBar 导航栏高斯模糊毛玻璃特效》之后想做一个高斯模糊的全屏加载，因为星宿加载的加载动画由南瓜动画到后期的灰色加载最后到现在全屏简约的全色彩色圆圈加载

区别

那么微信小程序全屏高斯模糊毛玻璃特效和之前相比会有什么优势呢？答案是：比之前的好看一些，也为了和上文能有一个共同的设计。设计加载动画的星宿是为了给文章加载争取时间，而做高斯模糊的话就要同步加载，因为背后用内容才体验出效果；

效果

代码

wxml

<!-- 加载遮罩层 -->
<block wx:if="{{isMask}}">
  <view class="mask-view">
    <view class="mask-loading">
      <image class="fengri-img" src="../../static/loading.gif"></image>
    </view>
  </view>
</block>

<block>
  <!-- S 内容主体 -->
  <view class="container_iew">
    <image class="fengri-img" src="../../static/bg.jpg" mode="aspectFill"></image>
  </view>
  <!-- E 内容主体 -->
</block>

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    // 加载遮罩层
    isMask:true
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--页面加载显示
   */
  onLoad() {
    
    // 打开1.2s关闭加载动画
    this.offMask();
    },

  // 打开1.5s关闭加载动画
  offMask:function(){
    let that = this;
    setTimeout(function(){
      that.setData({
        isMask:false
      })
    },1500)
  }

})

wxss

/* 加载遮罩层 */
.mask-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  backdrop-filter: blur(18px);
  background-color: rgb(220 220 220 / 50%);
}

.mask-loading {
  height: 70rpx;
  width: 70rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* 全局 */
.fengrui_mabo {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.fengri-img {
  height: 100%;
  width: 100%;
}

page {
  height: 100%;
  width: 100%;
}

.container_iew {
  height: 100%;
  width: 100%;
}

json

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

源码下载

https://yinfengrui.lanzouw.com/iMHic004kxra