Webleb - UI Elements - magic shapes

HTML

CSS

body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.container {
            position: relative;
            width: 100%;
            height: 100%;
        }

.shape {
            position: absolute;
            animation: float 8s infinite ease-in-out;
            transition: clip-path 0.5s ease-in-out;
        }
        /*forma 1 */
        .shape1 {
            width: 60px;
            height: 60px;
            background: #ff00ff;
            animation: 
                transformShape1 10s infinite, 
                colorChange 5s infinite, 
                fallShape1 39s infinite linear;
            left: 45%;
        }
        /*forma 2 */
        .shape2 {
            width: 80px;
            height: 80px;
            background: #00ffcc;
            animation: 
                transformShape2 9s infinite, 
                colorChange 4s infinite, 
                fallShape2 25s infinite linear;
            left: 48%;
        }
        /*forma 3*/
        .shape3 {
            width: 80px;
            height: 80px;
            background: #ffcc00;
            animation: 
                transformShape3 8s infinite, 
                colorChange 6s infinite, 
                fallShape3 20s infinite linear;
            left: 50%;
        }
        /*forma 4 */
        .shape4 {
            width: 70px;
            height: 70px;
            background: #cc00ff;
            animation: 
                transformShape4 7s infinite, 
                colorChange 3s infinite, 
                fallShape4 39s infinite linear;
            left: 47%;
        }
        /*animações */
        @keyframes float {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            50% { transform: translateX(50px) translateY(-30px) rotate(180deg); }
            100% { transform: translateX(0) translateY(0) rotate(360deg); }
        }

@keyframes transformShape1 {
            0% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
            33% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Retângulo */
            66% { clip-path: circle(50% at 50% 50%); } /* Círculo */
            100% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
        }

@keyframes transformShape2 {
            0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Retângulo */
            33% { clip-path: circle(50% at 50% 50%); } /* Círculo */
            66% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
            100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Retângulo */
        }

@keyframes transformShape3 {
            0% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
            33% { clip-path: circle(50% at 50% 50%); } /* Círculo */
            66% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Retângulo */
            100% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
        }

@keyframes transformShape4 {
            0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Quadrado */
            33% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* Triângulo */
            66% { clip-path: circle(50% at 50% 50%); } /* Círculo */
            100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Quadrado */
        }

@keyframes colorChange {
            0% { background: #ff00ff; }
            25% { background: #00ffcc; }
            50% { background: #ffcc00; }
            75% { background: #cc00ff; }
            100% { background: #ff00ff; }
        }

@keyframes fallShape1 {
            0% { top: 0; }
            100% { top: 100%; }
        }

@keyframes fallShape2 {
            0% { top: 0; }
            100% { top: 100%; }
        }

@keyframes fallShape3 {
            0% { top: 0; }
            100% { top: 100%; }
        }

@keyframes fallShape4 {
            0% { top: 0; }
            100% { top: 100%; }
        }

magic shapes

Recommended

CSS Animated Background with Shapes and Text

growing magic shapes

CSS Shapes Animation Example

HTML

CSS

JS

Recommended

CSS Animated Background with Shapes and Text

growing magic shapes

CSS Shapes Animation Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS