動畫效果如下:

GIF看起來可能會有點卡
wxml
<view class="confirm bubble">確定</view>
wxss
.confirm{ width: 325rpx; height: 80rpx; background: #07c160; 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.4s ease-in-out;}.bubble:active:after { transform: scale(0); opacity: 1; transition: 0s;}總結
以上所述是小編給大家介紹的微信小程序按鈕點擊動畫效果的實現,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
新聞熱點
疑難解答