微信小程序之转盘抽奖效果
效果图:
代码:
html:
<view class="background">
<image class="back" mode="widthFix" src="../../img/back-1.jpg" />
<image class="jiang" mode="widthFix" src="../../img/back-jiang.png" animation="{
{rotateData}}" />
<image class="zhen" mode="widthFix" src="../../img/back-zhen.png" bindtap="start" />
</view>
css:
.background{
position: relative;
width: 640rpx;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.back{
position: relative;
width: 100%;
}
.jiang{
position: absolute;
top: 75rpx;
left: 105rpx;
width: 460rpx;
}
.zhen{
position: absolute;
top: 180rpx;
left:250rpx;
width: 180rpx;
}
js:
let animation = wx.