css支付成功动画 svg打勾动画

动画是从b站看up主视频学的非原创

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打勾动画</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;}h2 {font-family: Helvetica;margin-top: 40px;font-size: 36px;color: #333;opacity: 0;}.circle {stroke-dasharray: 1194;stroke-dashoffset: 1194;}.tick {stroke-dasharray: 350;stroke-dashoffset: 350;}input[type="checkbox"]:checked+svg .circle {animation: circle 1s ease-in-out forwards;}input[type="checkbox"]:checked+svg .tick {animation: tick 0.8s 0.95s ease-in-out forwards;}input[type="checkbox"]:checked~h2 {animation: title 0.6s 1.2s ease-in-out forwards;}@keyframes circle {from {stroke-dashoffset: 1194;}to {stroke-dashoffset: 2388;}}@keyframes tick {from {stroke-dashoffset: 350;}to {stroke-dashoffset: 0;}}@keyframes title {from {opacity: 0;}to {opacity: 1;}}</style>
</head><body><input type="checkbox"><svg width="400" height="400"><circle class="circle" fill="none" transform="rotate(-90 200 200)" stroke="#68E534" stroke-width="20" cx="200"cy="200" r="190" stroke-linecap="round" /><polyline class="tick" fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138"stroke-linecap="round" stroke-linejoin="round"></polyline></svg><h2>Paymnet Success</h2>
</body></html>

css支付成功动画 svg打勾动画相关推荐

纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
css图像描边,纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意 ...
【注释张豪华版 Path酷炫动画】极速get花式Path （支付宝支付成功动画）
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54018970 ...
css3动画提交成功圆圈画对勾
这里写目录标题提交成功圆圈画对勾遇到的问题问题一:对号的动画要在圆圈执行完动画后执行解决: 问题二:css不能在display:none和display:block之间进行动画解决: 代码 ...
Android自定义控件(二)——支付宝支付成功动画
读律看书三九年,乌纱头上有青天,男儿欲画凌烟阁,第一功名不爱钱. 不知道大家关注过没有,在你使用支付宝的过程中,有一个支付成功的动画,虽然说很小,但看起来其实还是蛮实用的,涉及的知识点有Android ...
svg配合css3动画_与Sarah Drasner一起使用CSS，JS和SVG进行动画处理，并避免倦怠
svg配合css3动画 In this episode of the Versioning Show, Tim and David are joined by Sarah Drasner, a tea ...
svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
svg配合css3动画_如何使用CSS制作节日SVG图标动画
svg配合css3动画正是这个季节,因此在本教程中,我将逐步创建一些CSS动画,以假日为主题的SVG图标. Iconmelon上有一些很棒的图标,该网站上有许多免费的矢量图标集,可让您尽其所能 . ...
css动画和 js动画_CSS大师的动画建议
css动画和 js动画 Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoin ...

css支付成功动画 svg打勾动画

css支付成功动画 svg打勾动画相关推荐

最新文章

热门文章