欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現(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)方法

    webpack自動打包和熱更新的實現(xiàn)方法

    這篇文章主要介紹了webpack自動打包和熱更新的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • 禁用鍵盤上的(全局)指定鍵兼容iE、Chrome、火狐

    禁用鍵盤上的(全局)指定鍵兼容iE、Chrome、火狐

    確定你是要禁用全局的還是指定控件,如果是全局的 就只要監(jiān)聽window.keyDown = function(event){.....} 一樣一樣的,感興趣的朋友可以了解下哈
    2013-05-05
  • JS中的==運算: [''''] == false —>true

    JS中的==運算: [''''] == false —>true

    這篇文章主要介紹了JS中的==運算: [''] == false —>true的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-07-07
  • layui表格內容溢出的解決方法

    layui表格內容溢出的解決方法

    今天小編就為大家分享一篇layui表格內容溢出的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • KnockoutJS 3.X API 第四章之表單value綁定

    KnockoutJS 3.X API 第四章之表單value綁定

    Knockout是一個以數(shù)據(jù)模型(data model)為基礎的能夠幫助你創(chuàng)建富文本,響應顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關資料,需要的朋友可以參考下
    2016-10-10
  • 修改layui的后臺模板的左側導航欄可以伸縮的方法

    修改layui的后臺模板的左側導航欄可以伸縮的方法

    今天小編就為大家分享一篇修改layui的后臺模板的左側導航欄可以伸縮的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 使用Javascript實現(xiàn)復制粘貼功能的示例代碼

    使用Javascript實現(xiàn)復制粘貼功能的示例代碼

    本篇文章記錄如何通過js代碼實現(xiàn)復制內容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-09-09
  • 10 種最常見的 Javascript 錯誤(頻率最高)

    10 種最常見的 Javascript 錯誤(頻率最高)

    本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯誤,我們會告訴你什么原因導致了這些錯誤,以及如何防止這些錯誤發(fā)生。需要的朋友參考下
    2018-02-02
  • js 淘寶首頁的拼音排序效果

    js 淘寶首頁的拼音排序效果

    模仿淘寶首頁的拼音排序效果代碼。
    2009-05-05
  • js的Boolean對象初始值示例

    js的Boolean對象初始值示例

    Boolean(邏輯)對象用于將非邏輯值轉換為邏輯值(true 或者 false)下面為大家介紹下js的Boolean對象初始值
    2014-03-03

最新評論