微信小程序實現(xiàn)簽到彈窗動畫
更新時間：2020年09月21日 10:04:26 作者：換日線°
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簽到彈窗動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)簽到彈窗的具體代碼，供大家參考，具體內容如下
效果圖如下所示
圖片素材：
.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
})
},
})
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了webpack自動打包和熱更新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
確定你是要禁用全局的還是指定控件，如果是全局的 就只要監(jiān)聽window.keyDown = function(event){.....} 一樣一樣的，感興趣的朋友可以了解下哈2013-05-05![JS中的==運算： [''''] == false —>true](http://img.jbzj.com/images/xgimg/bcimg2.png)
JS中的==運算： [''''] == false —>true
這篇文章主要介紹了JS中的==運算： [''] == false —>true的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
今天小編就為大家分享一篇layui表格內容溢出的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個以數(shù)據(jù)模型（data model）為基礎的能夠幫助你創(chuàng)建富文本，響應顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關資料,需要的朋友可以參考下2016-10-10
今天小編就為大家分享一篇修改layui的后臺模板的左側導航欄可以伸縮的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
使用Javascript實現(xiàn)復制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實現(xiàn)復制內容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-09-09
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯誤，我們會告訴你什么原因導致了這些錯誤，以及如何防止這些錯誤發(fā)生。需要的朋友參考下2018-02-02
模仿淘寶首頁的拼音排序效果代碼。2009-05-05
Boolean（邏輯）對象用于將非邏輯值轉換為邏輯值（true 或者 false）下面為大家介紹下js的Boolean對象初始值2014-03-03