Particle Animation System

Particle Animation System

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 800px; text-align: center; padding: 20px; } h1 { margin-bottom: 20px; color: #333; } .buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #e0e0e0; cursor: pointer; font-size: 16px; transition: all 0.3s ease; } button:hover { background-color: #d0d0d0; } button.active { background-color: #4a90e2; color: white; } .animation-container { position: relative; width: 100%; height: 400px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; } /* Particles */ .particle { position: absolute; pointer-events: none; } /* Hearts */ .heart { background-color: red; display: inline-block; position: absolute; transform: rotate(-45deg); border-radius: 0; } .heart:before, .heart:after { content: ""; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; position: absolute; } .heart:before { top: -50%; left: 0; } .heart:after { top: 0; right: -50%; } /* Confetti */ .confetti { position: absolute; } /* Bubbles */ .bubble { border-radius: 50%; position: absolute; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); }