Webleb - UI Elements - growing magic shapes

HTML

CSS

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

body {
            background: #000;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }
        /*container */
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* shape */
        .shape {
            position: absolute;
            border-radius: 50%;
            animation: grow 4s ease-in-out infinite;
        }
        /*  circulo */
        .shape-1 {
            translate: -100% -100%;
            width: 50px;
            height: 50px;
            background: linear-gradient(45deg, #ff0080, #ff8000);
            animation-delay: 0s;
        }
        /*quadrado com bordas arredondadas */
        .shape-2 {
            translate: 100% 100%;
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #00ff80, #0080ff);
            animation-delay: 0.5s;
            border-radius: 20px;
        }
        /*quadrado  */
        .shape-3 {
            translate: -100% 100%;
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #8000ff, #ff0080);
            animation-delay: 1s;
            border-radius: 0;
            transform: rotate(45deg);
        }
        /*clip path do triangulo */
        .shape-4 {
            translate: 100% -100%;
            width: 70px;
            height: 70px;
            background: linear-gradient(45deg, #ffff00, #ff8000);
            animation-delay: 1.5s;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            border-radius: 0;
        }

/*clip path da estrela */
        .shape-5 {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #ff4080, #8040ff);
            animation-delay: 2.5s;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            border-radius: 0;
        }
        /*animacao das formas */
        @keyframes grow {
            0% {
                transform: scale(0);
                opacity: 0;
                filter: blur(10px);
            }
            25% {
                transform: scale(0.5);
                opacity: 0.7;
                filter: blur(5px);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
                filter: blur(0px);
                box-shadow: 0 0 30px currentColor;
            }
            100% {
                transform: scale(0) rotate(360deg);
                opacity: 0;
                filter: blur(10px);
            }
        }
        /*apenas para o video, pode remover */
        .codigo {
            position: absolute;
            top: 0;
            line-height: 1.6;
            text-align: left;
            color: #F8F8F2; 
            max-width: 570px;
            background: #272822; 
            padding: 20px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            white-space: pre-line;
            font-size: 14px;
        }

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

JS

growing magic shapes

Recommended