Animación de burbuja de pensamiento CSS

37 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

13 November 2024

Efecto de marco para imágenes usando CSS puro

22 May 2025

Aplicación de voz

23 August 2025

Formulario de inicio de sesión y registro HTML (turco)

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

Recomendado

Efecto de marco para imágenes usando CSS puro

Aplicación de voz

Formulario de inicio de sesión y registro HTML (turco)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS