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

46 ByBy.inc

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

अनुशंसित

10 December 2024

टेक्स्ट होवर एनीमेशन प्रभाव

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

अनुशंसित

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

एनिमेटेड HTML और CSS इनपुट

टेक्स्ट होवर एनीमेशन प्रभाव

HTML

CSS

JS

अनुशंसित

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

एनिमेटेड HTML और CSS इनपुट

टेक्स्ट होवर एनीमेशन प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS