动画效果如下：
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;
}
总结
以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
- 微信小程序按钮点击跳转页面详解
- 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
- 微信小程序分享功能之按钮button 边框隐藏和点击隐藏
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序 Animation实现图片旋转动画示例
- 微信小程序有旋转动画效果的音乐组件实例代码
- 微信小程序中使用wxss加载图片并实现动画效果
