使用CSS3实现一个随机粒子动画效果

要使用CSS3实现一个随机粒子动画效果，我们首先需要创建一些HTML元素来代表粒子，然后使用CSS来定义它们的样式和动画。由于CSS本身不支持真正的“随机”行为，我们可以通过JavaScript来动态地添加样式或类，从而实现更复杂的随机效果。

以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来创建一个基本的随机粒子动画效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机粒子动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="particle-container"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#particle-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: moveParticle infinite linear;
}

@keyframes moveParticle {
    0% {
        transform: translateX(0) translateY(0);
    }
    100% {
        transform: translateX(calc(100vw - 10px)) translateY(calc(100vh - 10px));
    }
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('particle-container');
    const numParticles = 100; // 粒子数量
    const maxDelay = 5; // 最大延迟时间（秒）

    for (let i = 0; i < numParticles; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        // 随机设置粒子的初始位置
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        // 随机设置粒子的动画延迟时间，以实现不同的开始时间
        particle.style.animationDelay = `${Math.random() * maxDelay}s`;
        container.appendChild(particle);
    }
});