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

CSS Circle Glow Animation Effect

Recommended

Hover Button Animation CSS

Slider Parallax Effect

Hotel Booking Website HTML CSS Template

HTML

CSS

JS

Recommended

Hover Button Animation CSS

Slider Parallax Effect

Hotel Booking Website HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS