Inicio » Blog » Javascript

19 noviembre, 2020

Árbol de Navidad animado en JS HTML y CSS

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

Vamos a crear o mejor dicho programar un ejercicio práctico usando los tres lenguajes del lado del frontend para el desarrollo de páginas web.

  • HTML
  • CSS
  • JAVASCRIPT

La idea es crear un árbol de navidad titilante con cambio de tres colores, que tenga la forma triángular. ¿Por qué? pues porque simplemente se puede hacer y no pongamos límite a nuestra capacidad de crear cualquier cosa. Y pues usando Lenguajes también aplicamos y desarrollamos nuestra creatividad.

¡Códigos a la obra!

O manos a la obras!. 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>
    ....
</body>
</html>

Código del Árbol de navidad

Aquí aplicamos el lenguaje de programación Javascript de forma avanzada, si aún estas empezando en el mundo de la programación web. En ocasiones puede tomar más tiempo, pero la práctica hace que aprendas más.

Código JS de una árbol de navidad

Puedes descargar el código fuente html + css + javascript ahora mísmo.


Leido 6686 veces

Demo

Descarga el código fuente Javascript

Recurso descargado 419 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


HTML HTML

Curso de HTML Básico - Aprende a crear páginas web desde cero

Descarga del código fuente

USD 0.00

Aprende más sobre Javascript

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023