Animación de burbuja de pensamiento CSS

727 byby.createsite

Abrir en el editor Publica tu código

Recomendado

29 November 2024

formulario de suscripción al boletín informativo

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

Animación de burbuja de pensamiento CSS

Recomendado

Un código de efficientapp58

Un código de alejandrob.f2012

formulario de suscripción al boletín informativo

HTML

CSS

JS

Recomendado

Un código de efficientapp58

Un código de alejandrob.f2012

formulario de suscripción al boletín informativo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS