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


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的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
详解js的视频和音频采集
Aug 09 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
很实用的一个完整email发送程序
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php短信接口代码
2016/05/13 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Django中使用locals()函数的技巧
2015/07/16 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
numpy基础教程之np.linalg
2019/02/12 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
普罗米修斯教学反思
2014/02/06 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
中班教师个人总结
2015/02/05 职场文书
大客户经理岗位职责
2015/04/09 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS