formes magiques en croissance

1,424 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 June 2025

Cartes de liens vers les réseaux sociaux HTML

15 May 2025

chargement

12 December 2025

Visualiseur de formes 3D : cube, sphère, triangle dans le navigateur

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