Effet d'animation CSS Circle Glow

975 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 August 2025

Structure d'animation de bloc CSS

26 February 2024

Formulaire de connexion HTML CSS

1 December 2024

Effet de survol du bouton d'action d'appel

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

Recommandé

Structure d'animation de bloc CSS

Formulaire de connexion HTML CSS

Effet de survol du bouton d'action d'appel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS