微信小程序?qū)崿F(xiàn)簽到彈窗動畫
更新時間：2020年09月21日 10:04:26 作者：換日線°
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簽到彈窗動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簽到彈窗的具體代碼，供大家參考，具體內(nèi)容如下
效果圖如下所示
圖片素材：
.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)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇使用Layui搭建后臺管理界面的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中使用Spread運算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運算符的八種方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家介紹了打印Proxy對象和ref對象的包實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
今天小編就為大家分享一篇解決eclipse中沒有js代碼提示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了JavaScript執(zhí)行機制，想要搞懂JavaScript執(zhí)行機制，便與進程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機制的具體介紹吧,需要的朋友可以參考一下2022-08-08
JS實現(xiàn)的自定義顯示加載等待圖片插件(loading.gif)
這篇文章主要介紹了JS實現(xiàn)的自定義顯示加載等待圖片插件,涉及javascript針對圖片的動態(tài)加載實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
JavaScript隊列函數(shù)和異步執(zhí)行詳解
這篇文章主要為大家詳細介紹了JavaScript隊列函數(shù)和異步執(zhí)行的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在面試過程中經(jīng)常被面試官問到這樣的題目：如何判斷數(shù)組？下面小編就針對這個問題給大家收集整理了份資料，感興趣的朋友一起看看吧2017-10-10
JS自定義函數(shù)對web前端上傳的文件進行類型大小判斷
這篇文章主要介紹了JS自定義函數(shù)對web前端上傳的文件進行類型大小判斷的相關(guān)資料,需要的朋友可以參考下2016-10-10