Webleb - fragmentos de código - Fragmento de animación HTML de Neuron

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

Fragmento de animación HTML de Neuron

Recomendado

Formulario de inicio de sesión HTML con alternancia de contraseña

Un código de creativearray554

Un código de fluxyftnpro

HTML

CSS

JS

Recomendado

Formulario de inicio de sesión HTML con alternancia de contraseña

Un código de creativearray554

Un código de fluxyftnpro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS