css 心跳动画

CSS实现心跳动画效果

原创已于 2025-09-15 11:47:49 修改 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-09-12 14:00:58 首次发布

CSS 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS动画

5 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    body {
        background-color: #576b9538;
        padding: 50px;
    }

    .container {
        background: #07c160;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        text-align: center;
        color: white;
        border-radius: 50px;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }
</style>


<body>


    <div class="container">213</div>

</body>

</html>