微信小程序按钮点击动画效果的实现
作者:CodeHunter_qcy
这篇文章主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
动画效果如下:
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; }
总结
以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
- 微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
- 微信小程序将页面按钮悬浮固定在底部的实现代码
- 微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
- 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
- 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
- 微信小程序批量监听输入框对按钮样式进行控制的实现代码
- 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
- 操作按钮悬浮固定在微信小程序底部的实现代码
- 详解微信小程序胶囊按钮返回|首页自定义导航栏功能
- 微信小程序mpvue点击按钮获取button值的方法
- 微信小程序单选radio及多选checkbox按钮用法示例
- 微信小程序开发之点击按钮退出小程序的实现方法
- 微信小程序按钮巧妙用法