Webleb - Snippets de Código - Trecho de animação de neurônio HTML

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #1d1d1d;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            /* Container para o código */
            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: 25%;
            min-width: 100%;
            width: 100%;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

/* Cores para highlighing de código */
        .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 {
            /* Container para a animação */
            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;
        }

/* Animação - Glitch de Neurônio */
        .mon_ticket_glitch {
            /* Pseudo-emente para a borda do neurônio */
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                height: 80%;
                background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
                mask-image: radial-gradient(circle, #000 10%, #333);
                mask-size: 100% 80%;
                mask-position: 50% 50%;
                clip-path: polygon(50% 0%, 100% 0%, 100% 25%, 75% 50%, 100% 100%, 50% 100%, 25% 75%, 0% 100%, 0% 25%, 25% 0%);
            }
        }

@keyframes mon_ticket_glitch_anima {
            /* Primeira sequência de frames */
            0% {
                transform: translate(-50%, -50%) rotate(30deg);
            }
            10% {
                transform: translate(-50%, -50%) rotate(60deg);
            }
            20% {
                transform: translate(-50%, -50%) rotate(90deg);
            }
            30% {
                transform: translate(-50%, -50%) rotate(120deg);
            }
            40% {
                transform: translate(-50%, -50%) rotate(150deg);
            }
            50% {
                transform: translate(-50%, -50%) rotate(180deg);
            }
            60% {
                transform: translate(-50%, -50%) rotate(210deg);
            }
            70% {
                transform: translate(-50%, -50%) rotate(240deg);
            }
            80% {
                transform: translate(-50%, -50%) rotate(270deg);
            }
            90% {
                transform: translate(-50%, -50%) rotate(300deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(330deg);
            }
        }

@keyframes mon_ticket_glitch_anima_2 {
            /* Segunda sequência de frames */
            0% {
                transform: translate(-50%, -50%) rotate(330deg);
            }
            10% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
            20% {
                transform: translate(-50%, -50%) rotate(330deg);
            }
            30% {
                transform: translate(-50%, -50%) rotate(300deg);
            }
            40% {
                transform: translate(-50%, -50%) rotate(270deg);
            }
            50% {
                transform: translate(-50%, -50%) rotate(240deg);
            }
            60% {
                transform: translate(-50%, -50%) rotate(210deg);
            }
            70% {
                transform: translate(-50%, -50%) rotate(180deg);
            }
            80% {
                transform: translate(-50%, -50%) rotate(150deg);
            }
            90% {
                transform: translate(-50%, -50%) rotate(120deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(90deg);
            }
        }

.neurônio-1 {
            /* Elemento principal da animação */
            position: relative;
            width: 300px;
            height: 300px;
            background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
            animation: mon_ticket_glitch_anima 5s infinite;
            animation-delay: 0.1s;
            animation-fill-mode: forwards;
        }

.neurônio-1::after {
            /* Pseudo-lemente complementar para a borda do neurônio */
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
            mask-image: radial-gradient(circle, #000 10%, #333);
            mask-size: 100% 80%;
            mask-position: 50% 50%;
            clip-path: polygon(50% 0%, 100% 0%, 100% 25%, 75% 50%, 100% 100%, 50% 100%, 25% 75%, 0% 100%, 0% 25%, 25% 0%);
            animation: mon_ticket_glitch_anima_2 5s infinite;
            animation-delay: 0.2s;
            animation-fill-mode: forwards;
        }

@media (any-pointer: coarse), (pointer-device: pen) {
            .neurônio-1::after {
                mask-image: none;
                clip-path: none;
            }
        }

@keyframes mon_ticket_glitch_anima_3 {
            /* Terceira sequência de frames */
            0% {
                opacity: 0;
            }
            10% {
                opacity: 0.5;
            }
            20% {
                opacity: 1;
            }
            30% {
                opacity: 0.5;
            }
            40% {
                opacity: 0;
            }
            50% {
                opacity: 0.1;
            }
            60% {
                opacity: 0;
            }
            70% {
                opacity: 0.1;
            }
            80% {
                opacity: 0;
            }
            90% {
                opacity: 0.1;
            }
            100% {
                opacity: 0;
            }
        }

.pontas-1 {
            /* Elementos complementares para as pontas do neurônio */
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
            border-radius: 10px;
            animation: mon_ticket_glitch_anima_3 5s infinite;
            animation-delay: -0.3s;
            animation-fill-mode: forwards;
        }

.pontas-2 {
            position: absolute;
            bottom: -25px;
            left: 70%;
            transform: translate(-50%);
            width: 50px;
            height: 50px;
            background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
            border-radius: 10px;
            animation: mon_ticket_glitch_anima_3 5s infinite;
            animation-delay: -0.2s;
            animation-fill-mode: forwards;
        }

.pontas-3 {
            position: absolute;
            bottom: -15px;
            left: 55%;
            transform: translate(-50%);
            width: 50px;
            height: 50px;
            background: conic-gradient(#8B0A0A 0%, #2F4F4F 20%, #3F3F3F 40%, #4F4F4F 60%, #5F5F5F 80%, #6F6F6F 100%);
            border-radius: 10px;
            animation: mon_ticket_glitch_anima_3 5s infinite;
            animation-delay: -0.1s;
            animation-fill-mode: forwards;
        }

@supports (mix-blend-mode: screen) {
            .neurônio-1 {
                mix-blend-mode: screen;
            }
        }

@supports (mix-blend-mode: multiply) {
            .neurônio-1::after {
                mix-blend-mode: multiply;
            }
        }

Trecho de animação de neurônio HTML

Recomendado

Efeito de texto 3D

Um código de Mete

Modelo de página de login HTML CSS do SEAT Leon

HTML

CSS

JS

Recomendado

Efeito de texto 3D

Um código de Mete

Modelo de página de login HTML CSS do SEAT Leon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS