HTML5動(dòng)畫背景代碼是一種使用HTML5技術(shù)制作的動(dòng)畫效果,可以作為網(wǎng)頁的背景來增加視覺沖擊力和美感。下面是一個(gè)HTML5動(dòng)畫背景代碼的示例:
<!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="canvas" /> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = window.innerWidth; var height = window.innerHeight; canvas.width = width; canvas.height = height; var particles = []; for (var i = 0; i < 100; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, radius: Math.random() * 4, color: '#FFF', speedX: Math.random() * 3 - 1.5, speedY: Math.random() * 3 - 1.5 }); } function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, width, height); particles.forEach(function(particle) { particle.x += particle.speedX; particle.y += particle.speedY; if (particle.x > width) { particle.x = 0; } else if (particle.x < 0) { particle.x = width; } if (particle.y > height) { particle.y = 0; } else if (particle.y < 0) { particle.y = height; } ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI); ctx.fillStyle = particle.color; ctx.fill(); }); } loop(); </script> </body> </html>
上面的代碼使用了<canvas>標(biāo)簽來繪制動(dòng)畫背景,利用了<script>標(biāo)簽內(nèi)的JavaScript代碼來控制粒子的移動(dòng)、顏色等屬性。對(duì)于需要添加動(dòng)畫背景的網(wǎng)頁,只需將上面的代碼復(fù)制粘貼到<body>標(biāo)簽內(nèi)即可。