2. 打勾动画

2022-07-02 12:00:50 作者：互联网
一、打勾动画效果

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