Feliz Navidad Arbol Animado con JS HTML y CSS

¿Cómo programar un árbol de navidad multicolor con Javascript?

VIDEO ¿Cómo programar un árbol de navidad multicolor con Javascript?

Usamos Javascript para aplicar estilos de animación a elementos html, una combinación genial de html y css para obtener un árbol de navidad animado

Ok, veamos el código fuente del árbol de navidad animado con JS, HTML y CSS, no si antes desearles una feliz navidad a todos los desarrolladores y todo el mundo a nombre del equipo de CODEA APP.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ÁRBOL DE NAVIDAD</title>
    <style>
        body{ background: black; display: grid;  justify-content: center; text-align: center; }
        h1{ color: greenyellow;}
        p{ color: teal; }
        .estrella{font-size: 100px; animation: colores 1s infinite;}
        .rojo{
            color:red;
            transition: all 1.5s;
            font-size: 30px;
        }
        @keyframes colores {
            0%{ color: red;}
            33%{ color: green;}
            66%{ color: red;}
            100%{ color: yellow;}
        }
    </style>
</head>
<body>
    <div class="estrella">*</div>
    <div id="arbol"></div>
    <h1>FELIZ NAVIDAD!!  Y PRÓSPERO AÑO NUEVO 2021</h1>
    <p>Les desea CODEA.APP a toda la comunidad de desarrolladores del mundo.</p>
    <script>
        var hojas = "";
        [10,2].forEach(row => {
            new Array(row).fill('').forEach((v,i) => {
                hojas += ([
                    ...Array(9-i).fill("<span> </span>"),
                    ...Array(1+i*2).fill("<span class='rojo'>*</span>"),
                    ...Array(9-i).fill("<span> </span>"),

                ].join(''))
                hojas += "<br>"
            })
        })
        document.getElementById("arbol").innerHTML = hojas;

        let animacion = document.querySelectorAll(".rojo");
        animacion.innerHTML = hojas;
        function animar(){
            for( var i =0 ; i<animacion.length; i++){
                let tiempo = i/20 +1
                animacion[i].style.animation = "colores "+tiempo+"s infinite"
            }
        }
        window.addEventListener('load',animar)
        
    </script>
</body>
</html>

 

¿Quieres descargar el código fuente Feliz Navidad Arbol Animado con JS HTML y CSS?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 167 veces | Publicado hace 2 meses

Curso Android PHP MYSQL App Restaurant

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE JAVASCRIPT

DESCARGAR ARCHIVOS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021