html3D爱心粒子代码源码分享
时间: 2024-10-02 17:02:00 浏览: 24
HTML5 3D爱心粒子效果通常通过 CSS3 和 JavaScript 实现,特别是利用 WebGL 这个底层 API 来创建逼真的动画效果。这里简单提供一个基本的 HTML、CSS 和 JavaScript 示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
perspective: 800px;
}
.heart-particles {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
animation: heart-rotation 2s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<div class="heart-particles">
<div class="particle"></div>
<!-- 可以添加更多粒子 -->
</div>
</div>
<script>
function heartRotation(x, y) {
return `rotateX(${x}deg) rotateY(${y}deg)`;
}
setInterval(() => {
const particles = document.querySelectorAll('.particle');
for (let i = 0; i < particles.length; i++) {
const particle = particles[i];
const xRandom = Math.random() * 360 - 180;
const yRandom = Math.random() * 360 - 180;
particle.style.transform = heartRotation(xRandom, yRandom);
}
}, 50); // 每隔50毫秒更新一次粒子位置
</script>
</body>
</html>
```
这个示例中,我们创建了一个包含许多红色粒子的心形容器,每个粒子会在 xy 平面上随机旋转,模拟出3D立体效果。你可以在此基础上进行调整,如改变颜色、大小、运动路径等。