微信小程序签到弹窗(动画效果)

效果图如下所示

图片素材:https://pan.baidu.com/s/1FGT8XANYO5PbzjE_QPfJ3w 提取码: kgv6

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

有什么问题欢迎评论留言，我会及时回复你的

微信小程序签到弹窗(动画效果)相关推荐

微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序实现旋转动画效果
问题在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法.那么接下来就来看一下如何实现一个文字旋转的动画效果吧 ...
微信小程序实现波浪动画效果
目录注效果图代码 .wxml .wxss 素材注波浪效果的素材来自小程序开源组件库ColorUI 效果图代码 .wxml <view class="header" ...
微信小程序水波纹动画效果
水波波动效果实现,复制查看效果 wxml <view class="circle"><view class="positionNumber"& ...
mpvue微信小程序动画_微信小程序MPvue实现动画效果
export default { data() { return { animation1: {}, animation2: {}, animation3: {}, stretch: false, / ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...

微信小程序签到弹窗(动画效果)

.wxml

.wxss

.js

微信小程序签到弹窗(动画效果)相关推荐

最新文章

热门文章