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

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

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

想法

在联系上文《微信小程序自定义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

(0)
上一篇 02/11/2022
下一篇 02/21/2022

相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论列表(4条)

  • wqs
    wqs 02/19/2022

    你好 我问一下 我搭建了1.3的博客 是您的UI 我评论的时候显示创建评论失败是怎么回事啊

    • 枫瑞博客
      枫瑞博客 02/19/2022

      @wqs @wqs文档里吗的wordpress—-评论那看下,文档地址:xs.frbkw.com

  • 灵
    02/17/2022

    小程序没办法下载,视频播放错误

    • 枫瑞博客
      枫瑞博客 02/18/2022

      @灵 @灵收到问题,今天中午处理

星宿UI 官方文档上线:https://xs.frbkw.com/ 
自己画的banner插画开源下载:https://banner.frbkw.com/