Floating Cloud Div - 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>Floating Cloud Div</title> <style> body { background-color: #3498db; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .cloud-div { background-color: white; border-radius: 50px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); position: relative; animation: float 3s infinite; } .cloud-div::before, .cloud-div::after { content: ''; position: absolute; background-color: white; border-radius: 50%; } .cloud-div::before { width: 50px; height: 50px; top: -25px; left: 25px; } .cloud-div::after { width: 30px; height: 30px; bottom: -15px; right: 25px; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } </style> </head> <body> <div class="cloud-div"> <div>☁️ Floating Cloud</div> </div> </body> </html>