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

369 ByBy.inc

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

अनुशंसित

26 February 2025

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

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 एनीमेशन कोड ब्लॉक उदाहरण

अनुशंसित

HTML CSS डेवलपर लैंडिंग पेज

मेटे का एक कोड

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

HTML

CSS

JS

अनुशंसित

HTML CSS डेवलपर लैंडिंग पेज

मेटे का एक कोड

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS