सीएसएस एनिमेशन: घोस्ट मेमोरी फ़्रैगमेंट प्रभाव

23 ByBy.inc

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

सीएसएस एनिमेशन: घोस्ट मेमोरी फ़्रैगमेंट प्रभाव

अनुशंसित

15 March 2024

CSS मेमोरी एनिमेशन स्निपेट

HTML

CSS

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

body {
            background-color: #1a1d2d;
            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%;
            max-width: 90%;
            width: 100%;
            overflow-y: auto;
            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;
        }

*{
             background: linear-gradient(to bottom, #2b204b, #1a1d2d);
          }

.codigo {
             background: #1a1d2d;
          }

.pixelated-memory {
            position: absolute;
            width: 150px;
            height: 150px;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3e%3crect x='0' y='0' width='100' height='100' fill='%23A6E22E'/%3e%3c/svg%3e");
             background-position: center center; 
            background-size: contain;
            background-repeat: no-repeat;
            animation: pixelate 3s infinite linear alternate;
            filter: blur(10px);
            opacity: 0.8;
            transform: translateX(80px) translateY(10px) scale(0.7) rotate(10deg);
            z-index: 1;
        }

@keyframes pixelate {
            0% {
                filter: blur(10px);
            }
            50% {
                filter: blur(20px);
            }
            100% {
                filter: blur(10px);
            }
        }

.memory-fragment {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #252a3f;
            border-radius: 15px;
            padding: 20px;
            mix-blend-mode: luminosity; 
            animation: ripple 3s infinite alternate; 
            overflow: hidden;
            z-index: 0; /* Ensure the memories are behind the pixels */
        }

/* This creates a ripple effect on the memories */
        @keyframes ripple {
            0% {
                transform: scale(1);  
            }
            25% {
                transform: scale(1.1); 
            }
            50% {
                transform: scale(1.15); 
            }
            75% {
                transform: scale(1.1); 
            }
            100% {
                transform: scale(1);
            }
        }

.ghost {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(180deg);
            width: 100%;
            height: 100%;
            mix-blend-mode: screen; 
            opacity: 0.8; 
        }

सीएसएस एनिमेशन: घोस्ट मेमोरी फ़्रैगमेंट प्रभाव

अनुशंसित

एनिमेटेड सीएसएस इनपुट

सीएसएस टेक्स्ट कलर एनिमेशन

CSS मेमोरी एनिमेशन स्निपेट

HTML

CSS

JS

अनुशंसित

एनिमेटेड सीएसएस इनपुट

सीएसएस टेक्स्ट कलर एनिमेशन

CSS मेमोरी एनिमेशन स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS