Webleb - Snippet di Codice

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

forme magiche

Consigliato

forme magiche in crescita

Esempio di animazione di forme CSS

danza interattiva delle forme

HTML

CSS

JS

Consigliato

forme magiche in crescita

Esempio di animazione di forme CSS

danza interattiva delle forme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS