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

最新推荐文章于 2024-06-12 16:34:51 发布

wm-tuzki

最新推荐文章于 2024-06-12 16:34:51 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/qin904495445/article/details/105792777

版权

动画是从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>

wm-tuzki

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
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"> <...
复制链接

扫一扫