Curso Práctico de Animaciones Interactivas

Amé este cursooooo :3 Me encanta que es realmente fácil hacer animaciones con CSS, y todo gracias al uso de Keyframes. Simplemente tienes que pensar en qué quieres que el objeto que estás animando haga en cierto punto para después programarlo 😈. . Por si a alguien le interesa, tengo este tutorial sobre cómo hacer un loader animado usando CSS, si al día de hoy seguías usando gifs para lograr este efecto, pues ya no más, ahora con CSS es posible 👇 :D . @youtube

Camilo Torres camayo

Estudiante

Muchas Gracias Steff ❤️️ En verdad aprendí demasiado en este curso, gran admiración Felicidades

Aquí dejo mi aporte del proyecto, espero les guste

GitHub | CodePen

Maria Guadalupe Caraveo Mosqueda

Estudiante

Me encanto este curso <3, los cursos de la maestra Estefany son super creativos, prácticos, con mucha información importante y con retos para aprender más. Les dejo como quedo mi proyecto y recuerden nunca paren de aprender :) .

Estefany Aguilar

Profesor

Ay Mariiiii... Me muero con esos ojitos de tus conejitosss... 😍 Te quedó espectacular tu proyecto... Lo amé !!!! 💚Y, así es, Nunca peremos de aprender 💚🤓

Anna Albirena

Estudiante

Aqui les dejo mi reto, lo hice en Halloween y me inspire en SquideGame! Code here: https://codepen.io/anna_albirena/pen/WNEEdyX

Gabriel Hernández Valdez

Estudiante

Gracias por este curso y el anterior!!. No sabia que se podían hacer tantas cosas con CSS. Nos vemos en el práctico cuando se libere :D

Estefany Aguilar

Profesor

Genial Gabriel !!! Gracias a ti por tus aportes en el cursooo 💚 Nos vemos en el curso prácticooo... wiii ✨

marco antonio

Estudiante

Estuvo bueno el curso, bueno dejo mi github y la page del proyecto

Paolo Joaquin Pinto Perez

Estudiante

Aquí está mi resultado final, bueno a mi me gusto el curso, fue muy bueno, por los retos, y la aplicacion de conceptos en el proyecto del curso. Código:

Estefany Aguilar

Profesor

Paoloooo !!!! Amé tu proyectoooo 😍Quedaron demasiado lindos tus conejitosss 🐰y funciona perfecto !!!! Muchas felicitacioness 💚

Paolo Joaquin Pinto Perez

Estudiante

Gracias profe!! 😃 Quisiera crear más y compartir por los tutoriales del curso. Esta muy divertido las animaciones con css.😀

Carlos Rafael Córdova Flores

Estudiante

Les comparto el juego, muy buen curso https://codepen.io/carloscdev/pen/YzZJopQ

Jose Luis Grande Acevedo

Estudiante

gran aporte

Jessica Silvia Payano Castro

Estudiante

Juan Camilo Valencia Silva

Estudiante

Este es mi resultado final, excelente curso 🙋🏻‍♂️

Christian Michelle Torres Martínez

Estudiante

https://codepen.io/123porshumway/pen/oNZEXaO?editors=1100

Les comparto mi proyecto realizado en este curso, gracias por los conocimientos compartidos.

Joseph Darwin Carhuaz Villagomez

Estudiante

⭐️⭐️⭐️⭐️⭐️

Sofia Rojas

Estudiante

Hace un año

Increíble el juego, estuvo divertido y fácil de entender, muchas gracias

Jorge Enrique Ramirez Cortes

Estudiante

buenas tardes es tratado de certificarme pero la plataforma no me deja responder la preguntas, en el momento de seleccionar mi respuesta y darle siguiente se queda y no avanza a la siguiente, que puedo hacer?

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

Bryan Castano

Estudiante

Hace un año

Hiii Chicos.

Este es Mine :

Yo lo he puesto en un servidor web apache2 HTTP en la otra habitacion , y luego Yo me puedo abirlo desde mi celular usando la IP de mi >Servidor Local Privado.

\nME gustado mucho el Projecto de este curso que estuvo Genial.

Bryan Castano

Estudiante

Hace 2 años

Hola Chicos \n

Este Curso corto ha sido Genial. \n Yo se que he aprendido varias cosillas nuevas y eforzado my CSS de cursos anteriores de @teffCode por la ruta completaFrontEnd

Yo ahora entiendo mejor el proceso de Rendering de una pagina web y LayOut.

Este fue my Catch Rabbits Game que hice inspirado en otros de La Comunidad.

Uno de estos dias lo voy hacer publico en my GitHyb y tambien en un S3 Bucket en AWS para ser una pagina estatica de un jueguito sencillo pero muy Emocionante.

Alejandro Ramos

Estudiante

Css lo hace fácil :D

Enzo Dillmann

Estudiante

Hice mi proyecto con la tematica de minecraft

Me pareció una idea divertida ya que el enderman dentro de minecraft cuando lo intentas tocar se desaparece y teletransporta a otros lugares, tiene esa mística de inalcanzable. Y como el objetivo del juego presentado inicialmente era atrapar conejos, decidí darle una vuelta más y crearme este desafío personal.

Espero les guste! 😋🐭

Para que puedan echarle un ojo al código 👀. Repo: https://github.com/dillmanncode/minecraft-game Y para que puedan probarlo 🕹️. GHPs: https://dillmanncode.github.io/minecraft-game/

MINECRAFT

Brandon Cortes Rivera

Estudiante