html圣诞树代码动态3d
时间: 2023-12-15 15:07:10 浏览: 705
以下是使用HTML、CSS和JavaScript实现的动态3D圣诞树代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>3D Christmas Tree</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var mp = 150; // maximum particles
var particles = [];
for(var i = 0; i < mp; i++) {
particles.push({
x: Math.random()*W, // x-coordinate
y: Math.random()*H, // y-coordinate
r: Math.random()*4+1, // radius
d: Math.random()*mp // density
})
}
function draw() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.beginPath();
for(var i = 0; i < mp; i++) {
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
var angle = 0;
function update() {
angle += 0.01;
for(var i = 0; i < mp; i++) {
var p = particles[i];
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
if(p.x > W+5 || p.x < -5 || p.y > H) {
if(i%3 > 0) {
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
} else {
if(Math.sin(angle) > 0) {
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
} else {
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}
setInterval(draw, 33);
</script>
</body>
</html>
```
这段代码使用HTML5的canvas元素、CSS和JavaScript实现了一个动态的3D圣诞树。它使用了粒子特效来模拟雪花的飘落,同时通过旋转和移动粒子来模拟圣诞树的动态效果。
阅读全文