当前位置: 首页 > 编程笔记 >

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

邓驰
2023-03-14
本文向大家介绍微信小程序按钮点击动画效果的实现,包括了微信小程序按钮点击动画效果的实现的使用技巧和注意事项,需要的朋友参考一下

动画效果如下:

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;
}

总结

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

 类似资料:
  • 本文向大家介绍微信小程序的动画效果详解,包括了微信小程序的动画效果详解的使用技巧和注意事项,需要的朋友参考一下 前言 由于公司计划有变,所以从H5页面改成去小程序写。所以在着手开发小程序。本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。 一、什么是微信小程序?   小程序在我的理解中只是高度封装的H5,封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微

  • 本文向大家介绍Android实现按钮点击效果,包括了Android实现按钮点击效果的使用技巧和注意事项,需要的朋友参考一下 1、首先创建一个按钮 2、1中创建的按钮的background用到了btn_st,在drawable下创建btn_st 3、在2中用到的color1和color2,在values的strings中添加 4、java代码 (1)首先获取button   Button click

  • 本文向大家介绍微信小程序 按钮滑动的实现方法,包括了微信小程序 按钮滑动的实现方法的使用技巧和注意事项,需要的朋友参考一下 微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml index.wxss index.js 三.顺便说说 1.按钮滑动事件 bindtouchstart //按钮开始滑动 bindtouchend //按钮结束滑动 bindtou

  • 本文向大家介绍微信小程序按钮点击跳转页面详解,包括了微信小程序按钮点击跳转页面详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 跳转到talkPage界面。 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:f

  • 本文向大家介绍微信小程序实现手势滑动效果,包括了微信小程序实现手势滑动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下 wxml: index.js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序实现轮播图效果,包括了微信小程序实现轮播图效果的使用技巧和注意事项,需要的朋友参考一下 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。 先来看看效果图: 主要用swiper + swiper-item来实现 一个简单的小案例,轮播图,代码简洁,功能强大。 源码点击下载 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。