2. 打勾动画

2022-07-02 12:00:50 阅读：211 来源： 互联网

标签：动画打勾 stroke animation dashoffset circle tick

一、打勾动画效果

GIF 2022-7-2 11-47-36

二、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打勾动画</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
        }
        h2 {
            font-family: Helvetica;
            font-size: 36px;
            margin-top: 40px;
            color: #333;
            opacity: 0;
        }
        input[type="checkbox"]:checked~h2 {
            animation: .6s title ease-in-out;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
        }
        .circle {
            stroke-dasharray: 1194;
            stroke-dashoffset: 1194;
        }
        input[type="checkbox"]:checked+svg .circle {
            animation: circle 1s ease-in-out;
            animation-fill-mode: forwards;
        }
        .tick {
            stroke-dasharray: 350;
            stroke-dashoffset: 350;
        }
        input[type="checkbox"]:checked+svg .tick {
            animation: tick .8s ease-out;
            animation-fill-mode: forwards;
            animation-delay: .95s;
        }
        @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 fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190" class="circle"
            stroke-linecap="round" transform="rotate(-90 200 200) " />
        <polyline fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round"
            stroke-linejoin="round" class="tick" />
    </svg>
    <h2>Payment Success</h2>
</body>

</html>

标签：动画,打勾,stroke,animation,dashoffset,circle,tick
来源： https://www.cnblogs.com/finish/p/16436997.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2. 打勾动画

一、打勾动画效果

二、完整代码