WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Redes sociais em francês
46
Skyrreum
Abrir no Editor
Publique Seu Código
Recomendado
29 September 2025
Animação de carregamento CSS com imagem de fundo
13 October 2025
Elementos HTML do contêiner de animação CSS
12 December 2025
Modelo de jogo Flappy Bird em HTML Canvas
HTML
Copy
Icônes sociales
Icônes sociales
Réseaux sociaux
Sélectionnez une plateforme pour vous connecter avec nous!
CSS
Copy
body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #0a1d3d, #0e2a57); color: #e0e0e0; transition: background 0.5s ease, color 0.5s ease; } .light-mode { background: linear-gradient(135deg, #2a2e3b, #3b3f4f); color: #ddd; } h1 { font-size: 2.5em; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); letter-spacing: 1px; transition: color 0.3s; } .toggle-button { position: absolute; top: 20px; right: 20px; background: transparent; border: none; color: inherit; font-size: 24px; cursor: pointer; transition: transform 0.3s; } .toggle-button:hover { transform: scale(1.2); } .social-icons { display: flex; gap: 30px; margin-bottom: 40px; } .icon { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%; text-decoration: none; font-size: 35px; transition: transform 0.3s, background 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.1); } .icon:hover { transform: scale(1.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .icon::before { content: ''; position: absolute; width: 300%; height: 300%; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: transform 0.3s; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } .icon:hover::before { transform: translate(-50%, -50%) scale(1); } .icon i { position: relative; z-index: 1; transition: color 0.3s, transform 0.3s; } .icon.facebook { color: #3b5998; } .icon.twitter { color: #1da1f2; } .icon.instagram { color: #e1306c; } .icon.snapchat { color: #fffc00; } .icon.tiktok { color: #69c9d0; } .icon.youtube { color: #ff0000; } .icon.whatsapp { color: #25d366; } .icon.discord { color: #7289da; } .info-card { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; text-align: center; width: 220px; opacity: 0; transition: opacity 0.3s; z-index: 10; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } .icon:hover ~ .info-card { opacity: 1; } h3 { margin: 0; font-size: 1.5em; } p { margin: 5px 0 0; font-size: 1em; } .footer { position: absolute; bottom: 20px; text-align: center; width: 100%; font-size: 0.8em; } .footer a { color: inherit; text-decoration: none; transition: color 0.3s; } .footer a:hover { color: #1da1f2; } .bubble { position: absolute; border-radius: 50%; opacity: 0.2; background: rgba(255, 255, 255, 0.2); animation: float 6s infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } .bubble:nth-child(1) { width: 100px; height: 100px; left: 20%; top: 50%; } .bubble:nth-child(2) { width: 120px; height: 120px; left: 60%; top: 70%; animation-duration: 8s; } .bubble:nth-child(3) { width: 80px; height: 80px; left: 80%; top: 30%; animation-duration: 5s; } .bubble:nth-child(4) { width: 150px; height: 150px; left: 40%; top: 20%; animation-duration: 10s; }
JS
Copy
const toggleButton = document.getElementById('toggle-mode'); const body = document.body; toggleButton.addEventListener('click', () => { body.classList.toggle('light-mode'); toggleButton.innerHTML = body.classList.contains('light-mode') ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>'; }); document.querySelectorAll('.icon').forEach(icon => { icon.addEventListener('mouseover', function() { const platform = this.classList[1]; let platformName; switch(platform) { case 'facebook': platformName = 'Facebook: Connect with friends and the world.'; break; case 'twitter': platformName = 'Twitter: Join the conversation.'; break; case 'instagram': platformName = 'Instagram: Share your moments.'; break; case 'snapchat': platformName = 'Snapchat: Share your snaps with friends.'; break; case 'tiktok': platformName = 'TikTok: Create and share short videos.'; break; case 'youtube': platformName = 'YouTube: Watch and share videos.'; break; case 'whatsapp': platformName = 'WhatsApp: Chat with friends and family.'; break; case 'discord': platformName = 'Discord: Chat and meet with communities.'; break; } document.getElementById('info-card').innerHTML = `<h3>${platform.charAt(0).toUpperCase() + platform.slice(1)}</h3><p>${platformName}</p>`; }); });