Curso Práctico de Animaciones Interactivas

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

Cursos Empresas Blog Live Conf Eventos Precios

0:000:34

Recursos

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.

Curso Práctico de Animaciones Interactivas

Curso de Animaciones con CSS

Clase 12 de 12

Clase 12 / 12

Magalí Acevedo

Hace 3 años

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

Comentarios (39)39 comentarios

Carlos Eduardo Gomez García

Hace 5 años

Camilo Torres camayo

Maria Guadalupe Caraveo Mosqueda

Estefany Aguilar

Profesor

Anna Albirena

Hace 4 años

Gabriel Hernández Valdez

marco antonio

Paolo Joaquin Pinto Perez

Carlos Rafael Córdova Flores

Jose Luis Grande Acevedo

Jessica Silvia Payano Castro

Juan Camilo Valencia Silva

Christian Michelle Torres Martínez

Joseph Darwin Carhuaz Villagomez

Kenneth Angulo L

Hace un mes

Sofia Rojas

Hace un año

Jorge Enrique Ramirez Cortes

Bryan Castano

Hace 2 años

----- ----

Enzo Dillmann

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

Recursos

Resumen

Curso Práctico de Animaciones Interactivas

Progreso del curso

Requisitos para tomar el curso

Animationland game

Animation y keyframes en CSS

Rendimiento de animaciones con CSS

Libros recomendados y próximos pasos