Webleb - Extraits de Code - Animation de bulle de pensée CSS

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

Animation de bulle de pensée CSS

Recommandé

Un code par fluxyftnpro

Un code par bachir123

Adresse des pages de connexion

HTML

CSS

JS

Recommandé

Un code par fluxyftnpro

Un code par bachir123

Adresse des pages de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS