前端案例【CSS3 动画练习跳动的心】_css动画练习-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44810886/article/details/124417360

本文分享了如何使用CSS3动画技巧制作一个酷炫的心形效果，适合前端开发者提升技能。通过关键帧动画实现45度旋转和缩放，带你领略前端视觉特效的魅力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 100vw;
            height: 100vh;
            background-color: #34495e;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .heart {
            width: 200px;
            height: 200px;
            background: #e74c3c;
            transform: rotate(45deg) scale(.5);
            animation-name: hd;
            animation-duration: 2s;
            animation-iteration-count: 4;
            opacity: 0.5;
        }
        
        .heart::before {
            content: '';
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: absolute;
            background: #e74c3c;
            transform: translateX(-100px);
        }
        
        @keyframes hd {
            25% {
                opacity: 1;
                transform: rotate(45deg) scale(1);
            }
            50% {
                opacity: 0.5;
                transform: rotate(45deg) scale(.5);
            }
            75% {
                opacity: 1;
                transform: rotate(45deg) scale(1);
            }
            85% {
                opacity: 0.5;
                transform: rotate(45deg) scale(.5);
            }
            to {
                opacity: 1;
                transform: rotate(45deg) scale(1);
            }
        }
        
        .heart::after {
            content: '';
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: absolute;
            background: #e74c3c;
            transform: translateY(-100px);
        }
    </style>
</head>

<body>
    <div class="heart">

    </div>
</body>