微信小程序按钮点击动画效果的实现
作者：CodeHunter_qcy 发布时间：2023-08-26 03:22:21
标签：微信小程序,按钮,点击,动画
动画效果如下：
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;
}
总结
以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助
来源：https://blog.csdn.net/qq_43390235/article/details/90668649
0
投稿猜你喜欢
- 下面这段代码是兼容IE的图片切换代码，请问各位老鸟如何兼容FF，或者有相类似无按钮无数字兼容FF的图片切换代码？<!DOCTYPE h
- 一段时间以来，发现有很多人XHTML都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML，我这里呢算是把一些常见的应用
本文实例为大家分享了微信小程序实现星星评价效果的具体代码，供大家参考，具体内容如下代码实现wxml文件<!--pages/evalua- tensorflow里面给出了一个函数用来读取图像，不过得到的结果是最原始的图像，是咩有经过解码的图像，这个函数为tf.gfile.Fast
- 方法一:1、将ORACLE软件拷贝到硬盘。 2、将 硬盘目录文件\stage\Components\oracle.swd.jre
- 目前网络数据库的应用已经成为最为广泛的应用之一了，并且关于数据库的安全性，性能都是企业最为关心的事情。数据库渐渐成为企业的命脉，优化查询就解
- 前言大家好！这个系列文章是W3CN 阿捷编写的。是一些制作过程中的心得和经验，希望对大家有点帮助。第一天开始制作符合标准的站点，第一件事情就
- 举个例子来说，要查找出2007-10-12至2007-10-31之间在网站上注册的会员，选择好日期后，点击“查询”按钮，发现2007-10-
- 半透明效果有时候会给页面增加不少色彩，特别是Vista盛行之后，半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中，只有PNG格式和G
- 文件名字处理文件名字得看业务要求。不需要保留原始名字，则随机生成名字，拼接上白名单校验过的后缀即可。反之要谨慎处理：//允许上传的后缀白名单
- 我们怎样才能了解用户需求呢？大家都知道可用性测试、调查问卷之类与用户进行沟通的途径，这些方法各有各的利弊，如果逐一分析的话，恐怕至少要分成三
- 在本章中，我们将重点介绍RSA密码加密的不同实现及其所涉及的功能.您可以引用或包含此python文件以实现RSA密码算法实现.加密算法模块&
- 与没有数据库的网站相比，数据库的存取会降低你的系统性能。但是大多数情况下，网站和数据库有密不可分的关系，正是数据库给站点提供了大容量、多样性
- 一个XML文档如果符合一些基本的规范，那它就是结构规范的。XML格式有一套比HTML简单的解析规则，允许XML解析器不需要外部描述或了解数据
- 方法一 <％dim total(7,3) total(1,0)="ASP之家"&n
- 尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。比如一个链接要么是这个颜色，要么
- 用过软件的朋友都知道，进度条是一个优秀软件的重要组成部分。它的存在能够使用户及时掌握程序的运行进度，确认应用程序正常工作。可是ASP中似乎没
- 具体代码如下所示：# -*- coding: utf-8 -*-import redisimport datetime''&
- 问题1：使用.net2005自带的SQL-Express连接不上。解决方法：1.网络防火墙阻止数据库连接；2.默认SQL-Express没有
- 我们先看一下淘宝的页面：这么一个庞然大物，该怎么切图呢？显然按照给出的方法也可以完成这项任务，但是做为前端开发的我们是否应该给自己提出更高的
