CSS एनीमेशन कोड ब्लॉक उदाहरण

677 byby.createsite

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 May 2025

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

5 December 2024

JEBJEB द्वारा एक कोड

HTML

CSS

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

body {
            background-color: #333;
            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%;
            width: 100%;
            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;
        }

.codigo {
          /*  Este código é uma representação simbólica da complexidade
          cresce em função de um bug desconhecido. */
        }
        
        
        .code-block {
            animation: th_bug_weight 3s ease infinite;
            background: linear-gradient(to bottom, #000, #141414);
            color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 8px;
        }

/* Animações */
        @keyframes th_bug_weight {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
            100% {
                transform: scale(1);
                opacity: 0.7;
            }
        }

/* Efeitos visuais */
        .effect {
            animation: th_fragmented-code 2s ease infinite;
        }

@keyframes th_fragmented-code {
            0% {
                filter: brightness(100%);
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
            50% {
                filter: brightness(120%); 
                clip-path: polygon(40% 0%, 80% 25%, 80% 75%, 40% 100%, 0% 75%, 0% 25%);
            }
            100% {
                filter: brightness(100%);
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
        }

CSS एनीमेशन कोड ब्लॉक उदाहरण

अनुशंसित

कोडेक्स द्वारा एक कोड

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

JEBJEB द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

कोडेक्स द्वारा एक कोड

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

JEBJEB द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS