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

JS

Recommended