1. css实现方式
<body> <div class=\"heart\"></div></body><style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffe6f2; margin: 0; } .heart { position: relative; width: 100px; height: 90px; animation: heartbeat 1.2s infinite; } .heart:before, .heart:after { position: absolute; content: \"\"; left: 50px; top: 0; width: 50px; height: 80px; background: #ff66a3; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style>
2. canvas实现方式
<body><canvas id=\"heartCanvas\" width=\"300\" height=\"300\"></canvas></body><style>body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffe6f2; margin: 0; } canvas { border: 1px solid #ddd; background-color: white; }</style>
<script> const canvas = document.getElementById(\'heartCanvas\'); const ctx = canvas.getContext(\'2d\'); let scale = 1; let direction = 1; function drawHeart(scale) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.fillStyle = \'#ff66a3\'; const centerX = canvas.width / 2; const centerY = canvas.height / 2; const size = 80 * scale; ctx.moveTo(centerX, centerY); for (let i = 0; i < Math.PI * 2; i += 0.01) { const x = centerX + size * (16 * Math.pow(Math.sin(i), 3)) / 16; const y = centerY - size * (13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3*i) - Math.cos(4*i)) / 16; ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); } function animate() { scale += direction * 0.02; if (scale > 1.2) { direction = -1; } else if (scale < 1) { direction = 1; } drawHeart(scale); requestAnimationFrame(animate); } animate(); </script>
