小程式點選小動畫
阿新 • • 發佈:2019-01-31
閒的蛋疼嘗試了一下,做了如下的效果
直接扔程式碼
wxml部分:
<view class="cash-out bubble">提現</view>
<view class="share bubble">推薦</view>
wxss部分:
.cash-out,.share{ width: 325rpx; height: 80rpx; background: #333; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{ position: relative; overflow: hidden; } .bubble:after{ content: ""; background: #999; position: absolute; width: 750rpx; height: 750rpx; left: calc(50% - 375rpx); top: calc(50% - 375rpx); opacity: 0; margin: auto; border-radius: 50%; transform: scale(1); transition: all 0.5s ease-in-out; } .bubble:active:after { transform: scale(0); opacity: 1; transition: 0s; }