WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de bulle de pensée CSS
485
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
20 May 2025
Formulaire de connexion au Glassmorphisme moderne en HTML et CSS
31 July 2025
Exemple de bouton néon HTML
1 March 2025
Barre de navigation moderne HTML CSS
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1A1A1C; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; max-width: 90%; width: 100%; overflow-y: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } /* Estilo CSS para a animação */ .thought-fragment { width: 100px; height: 100px; background-color: #4CAF50; border-radius: 50%; position: relative; animation: echo_loop 2s infinite linear alternate; /* Animação com efeito de eco */ } .thought-fragment::before { /* Contorno distorcido como se estivesse se infiltrado */ content: ''; position: absolute; top: -20px; left: -20px; width: 140px; height: 140px; background-color: #4CAF50; border-radius: 50%; filter: blur(50px) hue-rotate(360deg); animation: echo_distortion 8s infinite linear alternate-reverse; } /* Animações da cadeia de pensamentos */ @keyframes echo_loop { 0% { opacity: 1; transform: translate(0, 0); } 50% { opacity: 0.8; transform: translate(5px, 5px); } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes echo_distortion { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
JS
Copy
const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()'; const fontSize = 16; const columns = canvas.width / fontSize; const drops = Array.from({ length: columns }).fill(1); function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = `${fontSize}px monospace`; drops.forEach((y, i) => { const text = matrixChars[Math.floor(Math.random() * matrixChars.length)]; const x = i * fontSize; ctx.fillText(text, x, y * fontSize); if (y * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; }); } setInterval(draw, 50);