小程序的簡(jiǎn)單彈框例子
//wxml 布局文件
<view class="tips" wx:if="{{showGuide}}">
<view class="tips_hd luminous-font">
<view class="tip">小游戲歡迎你</view>
<view class="tip">開(kāi)始游戲哦</view>
</view>
<view class="tips_ft">
<button bindtap="startGame" class="start-btn"><image class="start-img"src="/resources/images/index/btn_bg.png"></image>開(kāi)始狼人殺</button>
</view>
</view>
//wxss 樣式文件
.tips {
position: absolute;
top: 5%;
bottom: 12%;
left: 10%;
right: 10%;
z-index: 999;
height: 85%;
padding: 32rpx 20rpx;
background: rgba(0,0,0,0.8);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
border-radius: 10px;
box-shadow: 0px 0px 40px blue;
}
.tips_hd {
font-size: 11pt;
display: flex;
flex-direction: column;
align-items: center;
line-height: 76rpx;
margin-top: 40rpx;
}
.tips_hd .tip {
font-size: 17pt;
display: flex;
align-items: center;
justify-content: center;
}
.luminous-font {
text-shadow: 0 0 10px #02AEFF,0 0 20px #02AEFF,0 0 30px #02AEFF,0 0 40px #02AEFF,0 0 70px #02AEFF,0 0 80px #02AEFF,0 0 100px #02AEFF,0 0 150px #02AEFF;
}
.tips .tips_ft {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
margin-top: -100rpx;
}
.start-img{
width:480rpx;
height:160rpx;
position:absolute;
top:0;
left:0;
z-index:-10;
}
.start-btn{
position:absolute;
width:480rpx;
height:160rpx;
line-height:160rpx;
border-radius:40rpx;
background:transparent;
color:#fff;
}
//js文件
data: {
showGuide:!0,
},
startGame: function () {
this.setData({
showGuide: !1
});
},
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
