Curso Práctico de Animaciones Interactivas

Clase 12 de 12 • Curso de Animaciones con CSS

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.

Carlos Eduardo Gomez García

teacher•

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

student•

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

student•

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

teacher•

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

student•

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

student•

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

teacher•

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

marco antonio

student•

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

Paolo Joaquin Pinto Perez

student•

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: https://codepen.io/paolojoaquin/pen/qBrVxOL

Estefany Aguilar

teacher•

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

Paolo Joaquin Pinto Perez

student•

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

student•

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

Jose Luis Grande Acevedo

student•

gran aporte

Jessica Silvia Payano Castro

student•

Juan Camilo Valencia Silva

student•

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

Christian Michelle Torres Martínez

student•

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

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

Joseph Darwin Carhuaz Villagomez

student•

⭐️⭐️⭐️⭐️⭐️

Sofia Rojas

student•

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

Jorge Enrique Ramirez Cortes

student•

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

student•

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

student•

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

student•

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

student•

Css lo hace fácil :D

Enzo Dillmann

student•

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

student•

Aquí esta el mío!