html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动的爱心</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="heart"><div class="petal"></div><div class="petal"></div>
</div>
<script src="script.js"></script>
</body>
</html>css （命名为styles.css）
body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f7f7f7;
}.heart {position: relative;width: 100px;height: 90px;transform: rotate(45deg);
}.petal {position: absolute;top: 0;width: 52px;height: 80px;border-radius: 50px 50px 0 0;background: red;
}.petal:first-child {left: 50px;border-bottom-right-radius: 40px 50px;transform: rotate(-45deg);transform-origin: 0 100%;
}.petal:last-child {left: 0;border-top-left-radius: 50px 45px;transform: rotate(45deg);transform-origin: 100% 100%;
}@keyframes heartbeat {0% { transform: scale(1); }50% { transform: scale(1.1); }100% { transform: scale(1); }
}.heart {animation: heartbeat 1s infinite;
}效果：
