微信小程序按钮点击动画效果的实现
动画效果如下:
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; }
总结
以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=
-
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
-
微信小程序有旋转动画效果的音乐组件实例代码
在微信开发中,写过的一个简单的音乐播放组件,记录下. music 音乐播放组件. 属性 属性名 类型 默认值 说明 music String 传入的音乐资源地址 musicStyle String (随便写了个) 音乐组件的样式 rotate Boolean true 播放时是否有旋转效果 iconOn String (随便写了个) 音乐播放时的icon地址 iconOff String (随便写了个) 音乐暂停时的icon地址 代码 properties: { // 音乐路径 music:
-
微信小程序中使用wxss加载图片并实现动画效果
记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW
-
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch
-
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
-
微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j
-
微信小程序 Animation实现图片旋转动画示例
最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现. 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animati
-
微信小程序按钮点击动画效果的实现
动画效果如下: 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{
-
小程序实现点击动画效果
本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下 今天接到一个小程序优化需求,要实现一个点击的动画效果 考虑实现方法,使用css的transition属性来进行实现,点击的时候给css新增一个active属性,就能实现这个效果了 // html <view class="list-box"> <view class="list {{item.check ? 'active' : ''}}" wx:for="
-
微信小程序开发animation心跳动画效果
本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo
-
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k
-
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
-
微信小程序实现点击卡片 翻转效果
动画效果: wxml: <view class='main'> <!--正面的框 --> <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 -->
-
微信小程序实现点击按钮后修改颜色
这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需实现的功能: 点击按钮后,按钮的颜色会加深 效果展示: 原按钮 点击后的按钮 思路: 给按钮设置一个点击事件,点击了按钮后,修改按钮的样式. 代码: test.wxml文件 <view wx:if="{{sty==0}}"> <view class="score" style="backg
随机推荐
- 浅析angularJS中的ui-router和ng-grid模块
- sql连接查询语句中on、where筛选的区别总结
- 用系统自带工具在安装系统时给新硬盘分区图解_图解硬盘分区
- php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
- 给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
- 浅谈php和.net的区别
- PHP原生模板引擎 最简单的模板引擎
- 详解如何在CentOS7中使用Nginx和PHP7-FPM安装Nextcloud
- 如何实现循环队列
- Android线程实现图片轮播
- 浅谈InnoDB隔离模式的使用对MySQL性能造成的影响
- Whatever:hover 无需javascript让IE支持丰富伪类
- iOS9苹果将原http协议改成了https协议的方法
- 8 种常用的 NoSQL 数据库系统对比分析
- mysql5.6安装配置方法图文教程
- jquery实现checkbox全选全不选的简单实例
- 基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
- javascript搜索框点击文字消失失焦时文本出现
- 金山反病毒20041224_日报
- jquery map方法使用示例