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 de Mete

Un code par adonis1887

Page de destination de l'agence immobilière

HTML

CSS

JS

Recommandé

Un code de Mete

Un code par adonis1887

Page de destination de l'agence immobilière

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS