脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序按钮点击动画

微信小程序按钮点击动画效果的实现

 更新时间：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;
}

总结

以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • jquery的.click()点击事件为什么无效，on('click',function())如何使用？

    jquery的.click()点击事件为什么无效，on('click',function())如何使

    jquery的.click()点击事件,通常都是可以正常使用的,有时选中的选择器被点击时无法触发回调函数,这是为什么呢？改成on绑定click就可以了吗？面对这样的情况,on('click',function())应该如何使用？
    2023-08-08
  • ES6 迭代器 Iterator使用总结

    ES6 迭代器 Iterator使用总结

    ES6引入了Iterator（迭代器）接口,用于顺序访问可迭代对象,Iterator接口提供统一的访问接口,并通过for...of循环供消费,本文给大家介绍ES6 迭代器 Iterator使用总结,感兴趣的朋友跟随小编一起看看吧
    2025-02-02
  • el-table动态渲染列、可编辑单元格、虚拟无缝滚动的实现

    el-table动态渲染列、可编辑单元格、虚拟无缝滚动的实现

    vue对数据处理很常见,本文主要介绍了对el-table组件二次封装,包括对el-table的动态渲染、单元格编辑；对于无缝滚动的实现,优化大数据量下的页面卡顿问题,感兴趣的可以了解一下
    2023-12-12
  • bootstrap手风琴折叠示例代码分享

    bootstrap手风琴折叠示例代码分享

    这篇文章主要为大家详细介绍了bootstrap手风琴折叠示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • javascript中select下拉框的用法总结

    javascript中select下拉框的用法总结

    这篇文章主要为大家介绍了javascript中select下拉框的用法，select在开发中经常被用到，用于进行选项选择,需要的朋友可以参考下
    2016-01-01
  • url 特殊字符 传递参数解决方法

    url 特殊字符 传递参数解决方法

    有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码。
    2010-01-01
  • ES6 Class中实现私有属性的一些方法总结

    ES6 Class中实现私有属性的一些方法总结

    这篇文章主要给大家介绍了关于ES6 Class中实现私有属性的一些方法，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • javascript最基本的函数汇总

    javascript最基本的函数汇总

    这篇文章主要给大家汇总介绍了javascript最基本的7个函数，十分的实用，有需要的小伙伴可以参考下。
    2015-06-06
  • JS/jQuery判断DOM节点是否存在的简单方法

    JS/jQuery判断DOM节点是否存在的简单方法

    下面性价比就为大家带来一篇JS/jQuery判断DOM节点是否存在的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起 小编过来看看吧
    2016-11-11
  • JavaScript本地存储与会话存储的实现介绍

    JavaScript本地存储与会话存储的实现介绍

    本地存储和会话存储是比较常用的方法，你知道两者的区别吗，本文详细的介绍了JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用，具有一定的参考价值，感兴趣的可以了解一下
    2022-08-08

最新评论