Curso Práctico de Animaciones Interactivas

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Requisitos para tomar el curso

1
Principios de Animación CSS: Keyframes y Animation en Acción
05:14 min

Animationland game

Animation y keyframes en CSS

Rendimiento de animaciones con CSS

Libros recomendados y próximos pasos

12
Curso Práctico de Animaciones Interactivas
Viendo ahora

Tomar examen

Curso Práctico de Animaciones Interactivas

Resumen

Felicidades por haber llegado hasta el final del curso. No sabes lo ansioso que estoy para que pongas en práctica lo aprendido.

Te recomiendo seguir con el curso de Maquetación y Animaciones con CSS.

Sin nada más que decir, me despide y espero verlos en una siguiente articlase.

Y no lo olvides, nunca pares de aprender💚. Contribución creada con los aportes de: Angel David Osorio Leyva.

Magalí Acevedo

Estudiante

Hola no se por que no me realiza el conteo si aparece el 0 en el score pero no se refleja al realizar check. si checkea lo inputs lo corrobore. dejo el codigo todavia no lo habia terminado.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="phone">
        <h3 class="total-count">SCORE:</h4>
      <!-- oso -->
      <div class="layer layer-1">
        <input type="checkbox"  />
        <div>
          <div class="head">
            <div class="stain stain-left">
              <div class="eye">
                <div class="eye-ligth"></div>
              </div>
            </div>
            <div class="stain stain-rigth">
              <div class="eye">
                <div class="eye-ligth"></div>
              </div>
            </div>
            <div class="nois"></div>
          </div>
          <div class="ear ear-left"></div>
          <div class="ear-small ear-small--left"></div>
          <div class="ear ear-rigth"></div>
          <div class="ear-small ear-small--rigth"></div>
        </div>
      </div>
      <!-- oso -->
      <div class="layer layer-2">
        <input type="checkbox"  />
        <div class="head">
          <div class="stain stain-left">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="stain stain-rigth">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="nois"></div>
        </div>
        <div class="ear ear-left"></div>
        <div class="ear-small ear-small--left"></div>
        <div class="ear ear-rigth"></div>
        <div class="ear-small ear-small--rigth"></div>
      </div>
      <!-- montaña -->
      <div class="layer layer-3">
        <div class="mountain">
          <div class="zigzag"></div>
          <div class="zigzag-two"></div>
          <div class="zigzag-three"></div>
        </div>
      </div>
      <!-- oso -->
      <div class="layer layer-4">
        <input type="checkbox"  />
        <div class="head">
          <div class="stain stain-left">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="stain stain-rigth">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="nois"></div>
        </div>
        <div class="ear ear-left"></div>
        <div class="ear-small ear-small--left"></div>
        <div class="ear ear-rigth"></div>
        <div class="ear-small ear-small--rigth"></div>
      </div>
      <!-- montaña -->
      <div class="layer layer-5">
        <div class="mountain">
          <div class="zigzag"></div>
          <div class="zigzag-two"></div>
          <div class="zigzag-three"></div>
        </div>
      </div>
      <!-- oso -->
      <div class="layer layer-6">
        <input type="checkbox"  />
        <div class="head">
          <div class="stain stain-left">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="stain stain-rigth">
            <div class="eye">
              <div class="eye-ligth"></div>
            </div>
          </div>
          <div class="nois"></div>
        </div>
        <div class="ear ear-left"></div>
        <div class="ear-small ear-small--left"></div>
        <div class="ear ear-rigth"></div>
        <div class="ear-small ear-small--rigth"></div>
      </div>
      <!-- montaña -->
      <div class="layer layer-7">
        <div class="mountain">
          <div class="zigzag"></div>
          <div class="zigzag-two"></div>
          <div class="zigzag-three"></div>
        </div>
      </div>
      <!-- pasto -->
      <div class="layer layer-8"></div>
      <!-- nubes -->
      <div class="layer layer-9"></div>
      <!-- nubes -->
      <div class="layer layer-10"></div>
    </div>
  </body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    counter-reset: score;
}
.phone{
position: relative;
width: 360px;
height:600px;
border-radius: 30px;
border: 8px solid #171717;
background: #ccefff;
box-shadow: 0 19px 38px rgba(0,0,0,0.38),0 15px 12px rgba(0,0,0,0.22);
overflow: hidden;

}
.layer{
position: absolute;
}
.layer-1{
z-index: 1;
height: 450px;
width: 80px;
/*background: pink;*/
bottom: 0;
right: 60px;

animation-name: layer;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;

}


@keyframes layer{
 0%{
    bottom: 0;
 }
 20%{
    bottom: -30px;
 }

 60%{
    bottom: -80px;
 }
 100%{
    bottom: 0;
 }
}

.layer-2{
z-index: 2;
height: 450px;
width: 80px;

bottom: 0;
left: 60px;
animation-name: layer;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
.layer-3{
z-index: 3;
left: 0;
right: 0;
margin: 0 auto;
width: 250px;
height: 400px;

bottom: 0;
overflow: hidden;
}
.layer-4{
z-index: 4;
height: 350px;
width: 80px;

bottom: 0;
left: 30px;
animation-name: layer;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
.layer-5{
z-index: 5;
width: 200px;
height: 300px;

bottom: 0;
overflow: hidden;
}
.layer-6{
z-index: 6;
height: 300px;
width: 80px;

bottom: 0;
right: 30px;
animation-name: layer;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.layer-7{
z-index: 7;
width: 200px;
height: 250px;

bottom: 0;
right: 0;
overflow: hidden;
}
.layer-8{
z-index: 8;
width: 150px;
height: 100px;
background: green;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;

}
.layer-9{
z-index: 9;
width: 150px;
height: 100px;
background: white;
bottom: 0;
right: 0;
border: 1px solid darkgray;
}
.layer-10{
z-index: 10;
width: 150px;
height: 100px;
background: white;
bottom: 0;
left: 0;
border-radius:0 0 50% ;
border: 1px solid darkgray;
}

/*Oso*/
.ear{
    width: 25px;
    height: 25px;
    background: black;
    border-radius: 50% 40%;
    position: absolute;
    top: -4px;
    
}
.ear-left{
    left: -5px;
}
.ear-rigth{
    right: -5px;
}
.ear-small{
    width: 15px;
    height: 15px;
    border-radius: 50% 40%;
    background: white;
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
}
.ear-small--left{
    transform: rotate(42deg);
    left: 6px;

}
.ear-small--rigth{
    right: 6px;

    transform: rotate(318deg);
}
.head{
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
    position: absolute;
    top: 0;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.stain{
    width: 30px;
    height: 30px;
    background: #424141;
    border-radius: 40% 40%;
    transform: rotate(45deg);
}
.eye{
    width:15px ;
    height: 14px;
    border-radius: 50%;
    background: black;
position: absolute;
top: 8px;
right: 8px;
}
.eye-ligth{
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    right: -4pxpx;
}

/*montaña*/
.mountain{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #bb6d51;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ;
    
}
.zigzag {
    height: 50px;
    background: linear-gradient(135deg, #699e6a 25%, transparent 25%) -50px 0, linear-gradient(-135deg, #699e6a 25%, transparent 25%) -50px 0;
    background-size: 50px 100px;
}
.zigzag-two {
    width: 450px;
    height: 50px;
    background: linear-gradient(135deg, #a7533d 25%, transparent 25%) -50px 0, linear-gradient(-135deg, #a7533d 25%, transparent 25%) -50px 0;
    background-size: 50px 100px;
    transform: rotate(180deg);
    position: absolute;
    left: -25px;
    top: 2px;
}
.zigzag-three {
    width: 450px;
    height: 50px;
    background: linear-gradient(135deg, #bb6d51 25%, transparent 25%) -50px 0, linear-gradient(-135deg, #bb6d51 25%, transparent 25%) -50px 0;
    background-size: 50px 100px;
    transform: rotate(180deg);
    position: absolute;
    left: -25px;
    top: 15px;
}
/*checkbox*/


 input[type="checkbox"] {
    appearance: none;
    cursor: pointer;
    height: 50px;
    margin: 0;
    position: relative;
    width: 80px;
    z-index: 1;
  }
  
 input[type="checkbox"]:focus {
    appearance: none;
    outline: none;

}
  input[type="checkbox"]:checked {
    counter-increment: score ;
  }
  
.total-count{
    text-align: center;
}
.total-count::after{
    content: counter(score);
}

Requisitos para tomar el curso

Principios de Animación CSS: Keyframes y Animation en Acción

Animationland game

Maquetación de Juegos con CSS y Animaciones Interactivas

Capas y posicionamiento en CSS: Uso del Z-Index en maquetación web

Dibujo de Conejitos con CSS: Estructura y Estilización

Animation y keyframes en CSS

Propiedades CSS para Animaciones y Keyframes

Animaciones CSS: Control de Duración e Iteración

Propiedades de Animación CSS: Timing Function y Delay

Propiedades CSS para Animaciones: Dirección, Relleno y Estado de Reproducción

Rendimiento de animaciones con CSS

Optimización del Renderizado Web: Layout, Paint y Composite

Debugging y uso de DevTools para optimizar animaciones web

Optimización de Animaciones Web con CSS Triggers

Libros recomendados y próximos pasos

Curso Práctico de Animaciones Interactivas

Resumen