Autor Tema: HTML y Animation CSS crear efectos dinámicos y movimiento en página web CU01065D  (Leído 2129 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Muy buenas tardes!

Adjunto mi ejercicio CU01065D del tutorial de programador web con CSS y aguardo sus correcciones o comentarios. Muchas gracias!

HTML:

Código: [Seleccionar]

<!DOCTYPE html>

<html>
    <head>
        <style>
            #contenedor {width:100%;height:80px;background-color:blue;border-radius:15px; margin:auto;}
            #Primero{width:10%; height:5%;background-color:yellow; margin:5px; border-radius:10px; position:absolute;}

         
                /* Empezamos definiendo las propiedades que va a tener el elemento en cada uno de los estados de la animación mediante el uso de la regla @keyframes.*/
                @keyframes Animacion {
                from {background-color:yellow;}
                /*Al elemento que se le aplique la animacion tendra un fondo de color amarillo*/
                25% {margin-left:24%;}
                /*Al 25% de comenzada la animacion el elemento tendra un margen izquierdo de 24%.*/
                50% {margin-left:49%;}
                /*Al 50% de comenzada la animacion el elemento tendra un margen izquierdo de 49%.*/
                75% {margin-left:74%;}
                /*Al 75% de comenzada la animacion el elemento tendra un margen izquierdo de 74%.*/
                100% {margin-left:87.5%;}
                /*Al 100% de comenzada la animacion el elemento tendra un margen izquierdo de 87.5%.*/
                to {background-color:aqua;}
                /*Al finalizar la animacion el elemento tendra el color definido en esta propiedad. La transformacion del mismo comienza en el primer paso de la animacion partiendo del color definido en "from".*/
                }
             
               
                .uno{animation-name:Animacion; /*Mediante esta propiedad indicamos el nombre de animación definida en una regla @keyframes*/
                animation-duration:2s; /* indicamos el tiempo en segundos (2) que llevará completar un ciclo de la animación. */
                animation-iteration-count:infinite; /*Numero de veces que se repite el ciclo de la animacion.*/
                animation-direction:normal; /*la animación se ejecutará hacia delante.*/
                animation-delay:1s; /*Indica el tiempo en segundos (s) que debe retrasarse el inicio de la animación.*/
                }
        </style>
 </head>

    <body>

        <p><b>Animation CSS:</b>
        Name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)</p>

            <div id="contenedor">
                <div class="uno" id="Primero"> </div>
            </div>

    </body>
</html>

« Última modificación: 18 de Junio 2017, 19:30 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Animation CSS - Ejercicio final (CU01065D)
« Respuesta #1 en: 14 de Mayo 2017, 19:05 »
Hola alefaletti.

Tu ejercicio es correcto.

Solo darte la enhorabuena por la finalización del curso y animarte a seguir otros cursos de los disponibles en www.aprenderaprogramar.com

Saludos. ;D
« Última modificación: 18 de Junio 2017, 19:29 por Alex Rodríguez »

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".