Animation de bulle de pensée CSS

1,184 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2025

Formulaire d'inscription de connexion rotatif 3D HTML CSS

18 June 2023

Formulaire de connexion simple

10 January 2026

Code HTML et CSS du formulaire de connexion animé

HTML

CSS

* {
            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);
            }
        }