Rainbow Alert - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rainbow Alert</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to right, #ffafbd, #ffc3a0); height: 100vh; display: flex; justify-content: center; align-items: center; } .alert { position: fixed; top: 20px; right: 20px; max-width: 300px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(-20px); transition: all 0.4s ease-in-out; } .alert.show { opacity: 1; transform: translateY(0); } .alert-icon { display: inline-block; margin-right: 10px; font-size: 24px; vertical-align: middle; } .alert-content { display: inline-block; vertical-align: middle; } .alert-close { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 18px; color: #ff5f5f; } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } .alert.show { animation: slideIn 0.4s ease-out forwards; } .alert.hide { animation: slideOut 0.4s ease-in forwards; } .glass-button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 20px; color: white; font-size: 16px; cursor: pointer; transition: background 0.3s, box-shadow 0.3s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .glass-button:hover { background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } </style> </head> <body> <div id="alert" class="alert"> <span class="alert-icon"><i class="fas fa-exclamation-circle"></i></span> <span class="alert-content">This is a rainbow alert!</span> <span class="alert-close" onclick="closeAlert()">✖</span> </div> <button class="glass-button" onclick="showAlert()">Show Alert</button> <script> function showAlert() { const alert = document.getElementById('alert'); alert.classList.add('show'); alert.classList.remove('hide'); setTimeout(() => { closeAlert(); }, 5000); // Auto close after 5 seconds } function closeAlert() { const alert = document.getElementById('alert'); alert.classList.add('hide'); alert.classList.remove('show'); } </script> </body> </html>