微信小程序按钮点击动画效果的实现
更新时间:2019年09月04日 10:51:40 作者: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按钮用法示例
- 微信小程序开发之点击按钮退出小程序的实现方法
- 微信小程序按钮巧妙用法
相关文章
浅谈js使用in和hasOwnProperty获取对象属性的区别
下面小编就为大家带来一篇浅谈js使用in和hasOwnProperty获取对象属性的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-04-04微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
这篇文章主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01一文搞懂JSON(JavaScript Object Notation)
Json 有两种基本的结构,即 Json对象 和 Json 数组。通过 Json 对象和 Json 数组这两种结构的组合可以表示各种复杂的结构,今天通过本文给大家介绍JavaScript Object Notation的基本知识,感兴趣的朋友一起看看吧2021-10-10
最新评论