模仿支付宝支付成功特效:svg圆圈转动+打钩

效果图(这里用点击事件来模拟触发事件):

代码：

HTML

    <main><div class="box"><svg class="arrow" width="40" height="40" viewBox="0 0 40 40"><circlecx="50%"cy="50%"r="19"fill="none"stroke="#ffffff"stroke-width="2"class="circle"></circle><polylinepoints="8,20 18,30 30 12"fill="none"stroke="#ffffff"stroke-width="2"class="hookmark"></polyline></svg></div></main>

css

   <style>* {margin: 0;padding: 0;box-sizing: border-box;}main {display: flex;align-items: center;justify-content: center;height: 100vh;}/* 按钮添加样式 */.box {width: 180px;height: 60px;background-image: linear-gradient(160deg, #0093e9, #80d0c7);border-radius: 8px;cursor: pointer;box-shadow: 0 2px rgba(0, 147, 233, 0.28);position: relative;display: flex;align-items: center;justify-content: center;overflow: hidden;}/* 打钩样式 */.box .hookmark {opacity: 0;}/* 加载完成时 出现打钩的样式 */.box.completed .hookmark {opacity: 1;stroke-dasharray: 100 100;stroke-dashoffset: 100;animation: 1s linear hookmarkTransform forwards 0.5s;}/* 初始化圆圈(opacity: 0;隐藏状态) */.box .circle {opacity: 0;transition: all 2.5s;stroke-dasharray: 314;stroke-dashoffset: 314;}/* 加载完成时 圈圈出现 */.box.completed .circle {opacity: 1;stroke-dashoffset: 0;}/* 打钩的动态样式 */@keyframes hookmarkTransform {from {stroke-dasharray: 100 100;stroke-dashoffset: 100;}to {stroke-dasharray: 100 100;stroke-dashoffset: 0;}}</style>

var uploadButton = document.querySelector('.box')uploadButton.addEventListener('click', () => {// //点击事件uploadButton.classList.add('completed')
})

模仿支付宝支付成功特效:svg圆圈转动+打钩相关推荐

【注释张豪华版 Path酷炫动画】极速get花式Path （支付宝支付成功动画）
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54018970 ...
Android自定义控件(二)——支付宝支付成功动画
读律看书三九年,乌纱头上有青天,男儿欲画凌烟阁,第一功名不爱钱. 不知道大家关注过没有,在你使用支付宝的过程中,有一个支付成功的动画,虽然说很小,但看起来其实还是蛮实用的,涉及的知识点有Android ...
仿支付宝支付成功控件
仿支付宝支付控件(PathMeasure的应用) 本节介绍的是支付宝支付成功的特效实例,废话不多说,先上图再说: 思路 1.首先对于该效果的实现,我考虑的通过动画的绘制过程,从而截取每一段动画,让控件 ...
支付宝php异步回调,支付宝支付成功之后异步回调处理
/** * alipay_notify.php. * User: lvfk * Date: 2017/10/26 0026 * Time: 13:48 * Desc: 支付宝支付成功异步通知 */ i ...
支付宝回调地址index.php,支付宝支付成功回调地址怎么不改变当前页面？
手机端支付宝支付成功后会有一个回调地址"http://pay.xxx.com/channel/alipayWap/return_url.php?is_success=T&notif ...
android支付宝支付成功后调其他界面,支付宝支付成功回调地址怎么不改变当前页面？...
手机端支付宝支付成功后会有一个回调地址"http://pay.xxx.com/channel/alipayWap/return_url.php?is_success=T&notif ...
支付宝支付成功后要重新登录问题解决小记
问题: 项目A使用项目B的支付宝配置信息,支付成功后,进入到了回调地址中,回调地址中的业务处理代码页执行成功,但是在跳转到商户页面时,跳转到非指定页面(如登录页面)或跳转到指定页面但是要求登录. 原因 ...
支付宝支付成功异步通知收不到怎么办？
支付宝支付成功异步通知收不到怎么办? 原因可能是 1)php的扩展curl没有开启 2)异步地址无法公网访问 3)异步地址代码传值错误 4)其实已经收到(其实是验签失败返回为空),但是没有做日志记录或 ...
支付宝支付成功后通知在微信打开的提示页面
背景正常情况下,在微信浏览器使用支付宝支付,会出现一大坨链接,让你手动的复制到浏览器打开去操作. 这样的用户体验,别说用户,就连没有审美的程序员也不能忍的. 于是阿力饼饼给出了方案,倒不是解决跳转的 ...
支付宝支付成功异步回调验签以及注意事项(附源码)
文章目录 1. 吐槽: 2. 要注意的点: 3. 导入方法(上代码) 1. 吐槽: 做微信支付的时候抽时间去看了支付宝支付,发现支付宝支付好简单,有官方给的SDK直接调用就OK,但是真正做起来才发现实 ...

模仿支付宝支付成功特效:svg圆圈转动+打钩

效果图(这里用点击事件来模拟触发事件):

代码：

模仿支付宝支付成功特效:svg圆圈转动+打钩相关推荐

最新文章

热门文章