Webleb - UI Elements - CSS Circle Glow Animation Effect

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 */
        }
    }

JS

CSS Circle Glow Animation Effect

Recommended