Webleb - कोड स्निपेट्स - 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;
            }
        }

HTML न्यूरॉन एनीमेशन स्निपेट

अनुशंसित

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

रोबक्स टैक्स कैलकुलेटर HTML CSS

HTML

CSS

JS

अनुशंसित

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

रोबक्स टैक्स कैलकुलेटर HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS