HTML5动效是通过Javascript来实现的。在HTML5中，可以使用Canvas、CSS3和SVG实现动画效果。下面是一段使用Canvas和Javascript实现动效的代码：
<!DOCTYPE html><html><head><title>Canvas动效</title><script>window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 50;
var y = 50;
var dx = 2;
var dy = 2;
function drawBall() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, 20, 0, Math.PI*2);
context.fillStyle="#0095DD";
context.fill();
context.closePath();
x += dx;
y += dy;
if(x < 0 || x > canvas.width) {
dx = -dx;
}
if(y < 0 || y > canvas.height) {
dy = -dy;
}
}
setInterval(drawBall, 10);
}
</script></head><body><canvas id="myCanvas" width="480" height="320"></canvas></body></html>上述代码使用Canvas绘制了一个圆形，随着时间的推移，圆形在画布内移动，当碰到边缘时会反弹。这种动画效果可以通过Javascript的定时器函数setInterval实现。