Webleb - Extraits de Code - Animation CSS : effet de fragment de mémoire fantôme

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; 
        }

Animation CSS : effet de fragment de mémoire fantôme

Recommandé

Un code par youssefdahroug2005

un site Web de plateforme

social moderne

HTML

CSS

JS

Recommandé

Un code par youssefdahroug2005

un site Web de plateforme

social moderne

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS