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

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

一、创建小程序组件

二、代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164015.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】C++的类型转换

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C学习 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C】C智…

微信小程序的OA会议之首页搭建

目录 一.小程序的布局 1.1. flex是什么 1.2. flex布局 1.3.总体布局 二.轮播图 2.1. 组件 2.2. 数据请求 2.3. 页面 三.首页 2.1. 视图 2.2.数据 2.3. 样式 好啦今天就到这里了&#xff0c;希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.小程序的布局 …

基于 Debian 稳定分支发行版的Zephix 7 发布

导读Zephix 是一个基于 Debian 稳定版的实时 Linux 操作系统。它可以完全从可移动媒介上运行&#xff0c;而不触及用户系统磁盘上存储的任何文件。 Zephix 是一个基于 Debian 稳定版的实时 Linux 操作系统。它可以完全从可移动媒介上运行&#xff0c;而不触及用户系统磁盘上存…

PHP-FFMpeg 操作音视频

✨ 目录 &#x1f388; 安装PHP-FFMpeg&#x1f388; 视频中提取一张图片&#x1f388; 视频中提取多张图片&#x1f388; 调整视频大小&#x1f388; 视频添加水印&#x1f388; 生成音频波形&#x1f388; 音频转换&#x1f388; 给音频添加元数据&#x1f388; 拼接多个音视…

微前端四:qiankun在开发中遇到的问题

在qiankun开发中会遇到很多问题&#xff0c;上一篇微前端三&#xff1a;qiankun 协作开发和上线部署其实也是在解决一些经常遇到的问题&#xff0c;下面的两点也算是比较经典的了 1、子应用图片路径问题 2、基座是Vue2.0 element ui 配合 子应用 Vue3.0 element plus 导致的样…

Linux-git

文章目录 git简介git常用命令配置初始化仓库将文件添加到暂存区将暂存区文件加入版本库对比工作区某文件和暂存区中的区别将暂存区的文件移除但git仍管理将文件移除暂存区并且git不再管理查看版本库切换到之前的版本恢复文件持久化 云端将本地的项目推送到远程仓库将远程仓库的…

weapp-tailwindcss for uni-app 样式条件编译语法插件

weapp-tailwindcss for uni-app 样式条件编译语法插件 版本需求 2.10.0 weapp-tailwindcss for uni-app 样式条件编译语法插件 这是什么玩意?如何使用 tailwind.config.js 注册postcss 插件注册 uni-app vite vue3uni-app vue2 配置完成 配置项 这是什么玩意? 在 uni-app …

[1Panel]开源,现代化,新一代的 Linux 服务器运维管理面板

测评介绍 本期测评试用一下1Panel这款面板。1Panel是国内飞致云旗下开源产品。整个界面简洁清爽&#xff0c;后端使用GO开发&#xff0c;前端使用VUE的Element-Plus作为UI框架&#xff0c;整个面板的管理都是基于docker的&#xff0c;想法很先进。官方还提供了视频的使用教程&…

vue使用pdf-dist实现pdf预览以及水印

vue使用pdf-dist实现pdf预览以及水印 一.使用pdf-dist插件将PDF文件转换为一张张canvas图片 npm install pdf-dist二.页面引入插件 const pdfJS require("pdfjs-dist"); pdfJS.GlobalWorkerOptions.workerSrc require("pdfjs-dist/build/pdf.worker.entry&…

ubuntu18.04 LTS卸载qtcreator-10.0.2

之前通过命令&#xff0c;通过.run文件&#xff0c;安装了Qt Creator 默认安装路径是/opt/ 卸载 在安装路径下&#xff0c;可以看到QtCreatorUninstaller文件 命令行运行该执行文件&#xff0c;会弹出卸载窗口&#xff0c;记得勾选下面的“仅卸载”

el-upload实现上传文件夹

背景&#xff1a;如图一所示&#xff0c;最下面有一个黄色上传文件按钮&#xff0c;为手动上传而且上传区域有上传文件和上传文件夹的区分 所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹 一、template区域 <el-uploadclass"upload-file"dra…

小程序:uniapp解决主包体积过大的问题

已经分包但还是体积过大 运行时勾选“运行时是否压缩代码”进行压缩 在manifest.json配置&#xff08;开启分包优化&#xff09; "mp-weixin" : {"optimization" : {"subPackages" : true}//.... },在app.json配置&#xff08;设置组件按需注入…

客户端post请求,服务器收到{}数据解决方法

当我们发起登录请求时&#xff0c;后台接收到的为{}数据 原因&#xff1a;传送过去的对象格式不对 解决方案&#xff1a; 引入qs npm install qs 在data中格式化数据 const res await axios({url:http://127.0.0.1:3000/post,method:post,data:Qs.stringify({username:te…

华为智选SF5,AITO问界的车怎么样

#华为智选 #赛力斯SF5 #aito问界m5 #aito问界m7 #华为汽车 华为的车&#xff0c;后杠焊两点&#xff0c;拉车的时候&#xff0c;拖车钩断了&#xff0c;后杠拉出来了&#xff0c;这质量可以吗&#xff1f;是否应该全部召回&#xff1f;M5&#xff0c;M7是不是也这样&#xff1f…

MIT6.5830 Lab0-Go tutorial实验记录(二)

MIT6.5830 Lab0-Go tutorial实验记录&#xff08;二&#xff09; – WhiteNights Site 标签&#xff1a;Golang, 数据库 在将数据库的数据转换为图表前&#xff0c;我们需要先测试是否能正常访问数据库文件。 写者注 为什么要怎么做&#xff1f;因为这块 非常容易出问题。在h…

https证书配置(nginx)

HTTPS 是什么 HTTPS 是一种应用层协议&#xff0c;是一种透过计算机网络进行安全通信的传输协议&#xff0c;HTTPS 经由 HTTP 进行通信&#xff0c;但是在 HTTP 的基础上引入了一个加密层&#xff0c;使用 SSL/TLS 来加密数据包&#xff0c;HTTPS 开发的主要目的&#xff0c;是…

作用域和作用域链

概述 本文将讲解作用域的形成和应用&#xff0c;并且在这基础上简单讲解for循环中的let创建的块级作用域原理。 一&#xff0c;作用域 1.1&#xff0c;作用域的概念 作用域是指在程序中定义变量的区域&#xff0c;该位置决定了变量的生命周期。 function testFn(){var a1 …

Zookeeper 和 Kafka 工作原理及如何搭建 Zookeeper集群 + Kafka集群

目录 1 Zookeeper 1.1 Zookeeper 定义 1.2 Zookeeper 工作机制 1.3 Zookeeper 特点 1.4 Zookeeper 数据结构 1.5 Zookeeper 应用场景 1.6 Zookeeper 选举机制 2 部署 Zookeeper 集群 2.1 安装前准备 2.2 安装 Zookeeper 3 Kafka 3.1 为什么需要消息队列&#xff08;…

SSH连接华为交换机慢

ssh连接交换机慢是因为交换计算密钥算法阶段默认使用安全性更高的秘钥&#xff0c;由于性能问题导致连接比较慢&#xff0c;如一台华为S5735S-L24T4S-QA2的交换机默认使用如下秘钥&#xff0c;安全行由高到低。 ssh server key-exchange dh_group16_sha512 dh_group15_sha512 …

Redux详解(二)

1. 认识Redux Toolkit Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。 通过传统的redux编写逻辑方式&#xff0c;会造成文件分离过多&#xff0c;逻辑抽离过于繁琐&#xff08;具体可看上篇文章 Redux详解一&#xff09;&#xff0c;React官方为解决这一问题&#xff0c;推…