微信小程序实现签到弹窗动画


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了微信小程序实现签到弹窗的具体代码,供大家参考,具体内容如下

效果图如下所示

微信小程序实现签到弹窗动画

图片素材:

微信小程序实现签到弹窗动画

微信小程序实现签到弹窗动画

.wxml

<button bindtap="popup">签到</button>
<view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;'}}">
 <image class="loadingpic" src="/images/light.png"></image>
 <image class="load-imagae" src="/images/register.png"></image>
 <view class="load-centent">
 <view>签到成功</view>
 <view>获得0积分</view>
 <view bindtap="popup">好的</view>
 </view>
</view>

.wxss

page{
 background-color: #ccc;
}
view{
 box-sizing: border-box;
}
button{
 margin-top: 50rpx;
}
.load{
 width: 80%;
 height: 600rpx;
 position: fixed;
 top:calc((100vh - 800rpx)/2);
 left: 10%;
 transition: all 0.3s ease-in-out 0s;
 -webkit-transition: all 0.3s ease-in-out 0s;
 opacity: 1;
 z-index: 10;
}
.loadingpic {
 width: 100%;
 height: 93%;
 position: absolute;
 animation: load 3s linear 1s infinite;
 z-index: 10;
 margin-top: 7%;
}
@keyframes load{
 0%{
 webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100%{
 webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.load-imagae{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: absolute;
 z-index: 11;
}
.load-centent{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: relative;
 z-index: 12;
 text-align: center;
 padding: 25% 10% 5% 10%;
}
.load-centent>view:nth-child(1){
 font-size: 34rpx;
 color: #fff;
}
.load-centent>view:nth-child(2){
 color: #fff;
 opacity: 0.7;
 margin: 20rpx 0;
 font-size: 24rpx;
}
.load-centent>view:nth-child(3){
 width: 85%;
 margin: 30rpx 7.5% 0 7.5%;
 height: 70rpx;
 line-height: 70rpx;
 border-radius: 40rpx;
 background-color: #F8D168;
 color: #EB4331;
 font-size: 30rpx;
}

.js

Page({
 data: {
 sign:false,
 },
 popup:function(e){
 this.setData({
  sign:!this.data.sign
 })
 }, 
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 #Javascript
微信小程序实现日历签到
Sep 21 #Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
You might like
将OICQ数据转成MYSQL数据
2006/10/09 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
浅析is_writable的php实现
2013/06/18 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
python中字符串的操作方法大全
2018/06/03 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
python怎么判断素数
2020/07/01 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
专家推荐信模板
2014/05/09 职场文书
法学自荐信
2014/06/20 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
党员转正大会主持词
2015/07/02 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
《正比例》教学反思
2016/02/23 职场文书