Webleb - Snippet di Codice - Effetto di animazione bagliore circolare CSS

HTML

CSS

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

body {
        background-color: #2f3640; /* Darker background to intensify the glow effect */
        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;
    }

/* Animation Styles */ 
    .animation-container:before { /* Glitch effect on empty space */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(#0003, #000a); /* subtle gradient */
        filter: blur(30px); /* Blur to soften the effect */
        mix-blend-mode: overlay; /* Overlay effect with animation container */
    }
    .code-snippet {
        width: 30%; 
        height: 300px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1); /* Semi-transparent light background */
        clip-path: circle(30% at 50% 50%); /* Creates a circular cutout effect */
        transform: rotate(-20deg); /* Tilts the code snippet */
        animation:  translate-and-glow 5s infinite linear; /* Animate the glow and repositioning */
    }
    .code-snippet::before {
        content: "/* // Imposter Syndrome Lurking...";
        position: absolute;
        top: 20px;
        left: 20px;
        color: #b2bdc1; /* very light gray comment color */
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 12px;
        mix-blend-mode: additive;
    }

@keyframes  translate-and-glow {
        0% {
            transform: translate(-10vw, -10vh) rotate(-20deg); /* Position and rotate initial values */
            filter: blur(5px); /* Start with a less pronounced blur  */
        } 
        50% { 
            transform: translate(10vw, 10vh) rotate(0deg); 
            filter: blur(25px); /*  Maximize blur at the midpoint  */
        }

100% {
            transform: translate(-10vw, -10vh) rotate(-20deg); 
            filter: blur(5px); /* Back to the initial animation state */
        }
    }

Effetto di animazione bagliore circolare CSS

Consigliato

Raccolta di animazioni circolari CSS

Un codice di NotYoEA

Un codice di bachir123

HTML

CSS

JS

Consigliato

Raccolta di animazioni circolari CSS

Un codice di NotYoEA

Un codice di bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS