在HTML5中，我們可以使用Canvas元素創建各種動畫效果。其中比較常見的就是愛心動畫。以下是一個簡單的HTML5愛心動畫效果代碼：

<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var curves = [
new Circle(0.2, 0.5, 0.1),
new Circle(0.8, 0.5, 0.1),
new Curve(0.1, 0.6, 0.8, 0.6, 0.5, 0.8)
];
function Circle(x, y, r) {
this.x = x * width;
this.y = y * height;
this.r = r * height * 0.3;
}
function Curve(x1, y1, x2, y2, x3, y3) {
this.x1 = x1 * width;
this.y1 = y1 * height;
this.x2 = x2 * width;
this.y2 = y2 * height;
this.x3 = x3 * width;
this.y3 = y3 * height;
}
function init() {
setInterval(draw, 30);
}
function draw() {
ctx.clearRect(0, 0, width, height);
var time = new Date().getTime() * 0.002;
var x = 0;
var y = 0;
for (var i = 0; i< curves.length; i++) {
var curve = curves[i];
ctx.beginPath();
ctx.moveTo(curve.x1, curve.y1);
for (var j = 0; j< 150; j++) {
var t = j / 150;
var tx = (1 - t) * (1 - t) * curve.x1 + 2 * (1 - t) * t * curve.x2 + t * t * curve.x3;
var ty = (1 - t) * (1 - t) * curve.y1 + 2 * (1 - t) * t * curve.y2 + t * t * curve.y3;
ctx.lineTo(tx, ty);
}
ctx.stroke();
}
ctx.fillStyle = "red";
ctx.beginPath();
var size = Math.sin(time) * 0.5 + 0.5;
x = curves[0].x + (curves[1].x - curves[0].x) * size;
y = curves[0].y + (curves[1].y - curves[0].y) * size;
var r = curves[0].r + (curves[1].r - curves[0].r) * size;
ctx.arc(x, y, r, 0, Math.PI * 2, true);
size = Math.sin(time + Math.PI) * 0.5 + 0.5;
x = curves[0].x + (curves[1].x - curves[0].x) * size;
y = curves[0].y + (curves[1].y - curves[0].y) * size;
r = curves[0].r + (curves[1].r - curves[0].r) * size;
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.fill();
}
init();
</script>

代碼中使用了Canvas元素，通過繪制曲線軌跡，最終實現了兩個圓形長出愛心的效果。整段代碼使用JavaScript編寫，包括初始化Canvas元素、定義曲線軌跡對象、愛心的繪制等。具體來說，我們可以通過曲線軌跡對象中的三個點坐標確定一個二次貝塞爾曲線（Q曲線），通過循環遍歷曲線上的點，利用Canvas上的繪制API來將曲線路徑繪制出來。

在愛心的繪制中，我們使用了時間戳來不斷變化愛心的大小，實現了隨著時間變化的動畫效果。同時，我們需要注意Canvas元素同樣也支持動畫效果，因此可以使用定時器實現逐幀動畫效果。