微信小程序實現(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ā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS中的==運算: [''''] == false —>true
這篇文章主要介紹了JS中的==運算: [''] == false —>true的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個以數(shù)據(jù)模型(data model)為基礎的能夠幫助你創(chuàng)建富文本,響應顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關資料,需要的朋友可以參考下2016-10-10使用Javascript實現(xiàn)復制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實現(xiàn)復制內容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-09-09