CSS

Dibujando y animando con CSS – Pollo Volador

Recientemente, hice varios cursos de HTML y CSS, aprovechando que Platzi y otras plataformas abrieron de forma gratuita sus cursos. Una de las tareas del Curso de CSS Grid de Platzi, dictado por Estefany Aguilar @teffcode era dibujar con CSS y de ser posible, animarlo con CSS.

Aquí les dejo el resultado, espero les guste.

Link: https://codepen.io/mfranchi82/pen/VwpEpLE

Por otro lado, me encuentro buscando patrocinio para continuar con mi proceso de educación online, a través de la plataforma Platzi.com, ya que cuenta con más de 700 cursos que pueden ayudarme a reforzar y a aprender nuevas tecnologías, además de que cuentan con cursos súper interesantes de Marketing Digital, Escuela de Negocios y muchos más.

Si quieres ser parte de mis patrocinantes, te dejo el link de mi PayPal acá: https://www.paypal.com/paypalme/mfranchi82?locale.x=en_US

Créeme que si me ayudas, te recompensaré, ya sea con una página web, diseño de un logo o ayuda con tus redes sociales, para que no sientas que me regalas el dinero, sino que es una inversión para ambos.

Gracias por creer en mí.

Algunos recursos utilizados:

Código:

HTML

 <div>
  <div class="cabeza"></div>
  <div class="pico"></div>
  <div class="ojo"></div>
  <div class="punto-ojo"></div>
  <div class="ala"></div>
  <div class="cuerpo"></div>
  <div class="pata"></div>
  <div class="piso"></div>
  <div class="nube1"></div>
  <div class="nube2"></div>
</div>

CSS

:root {
  --background: #74C2FF;
  --cabeza: #FFC300;
  --ojo: #000;
  --punto: #fff;
  --cuerpo: #FF5733;
  --pico: #FF6121;
  --ala: #FEE14E;
  --pata: #302E22;
  --piso: #E6F4FF;
  --nube: #E6F4FF;
}

body {
  background: var(--background);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.cabeza {
  position: relative;
  width: 200px;
  height: 200px;
  background: var(--cabeza);
  border-radius: 100px 100px 0 0;
}

.cuerpo {
  position: relative;
  width: 200px;
  height: 130px;
  background: var(--cuerpo);
  border-radius: 0 0 100px 5px;
}

.pico {
  display: block;
  position: absolute;
  margin: -80px 200px;
  width: 0; 
  height: 0; 
  border-left: 20px solid var(--pico);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
}


.ojo {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--ojo);
  margin: -100px 150px;
  border-radius: 50%;
}

.punto-ojo {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--punto);
  margin: -100px 150px;
  border-radius: 50%;
}

.ala {
  position: absolute;
  width: 200px;
  height: 100px;
  background: var(--ala);
  border-radius: 100px 5px;
  margin: 0 -90px;
  z-index: 1;
  animation-name: pulse;
  animation-delay: 1s;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {transform: scale(1) rotate(-10deg);}
  50% {transform: scale(1.2) rotate(-20deg);}
  100% {transform: scale(1) rotate(-10deg);}
}

.nube1 {
  position: absolute;
  width: 300px;
  height: 100px;
  background: var(--nube);
  margin: -500px 140px;
  border-radius: 60px;
  animation: mov1 12s cubic-bezier(.87,.67,.83,.67) infinite;
}

.nube1:after, .nube1:before {
  content: '';
  position: absolute;
  background: var(--nube);
  z-index: -1
}

.nube1:after {
  width: 140px; height: 140px;
  top: -50px; left: 50px;
  border-radius: 100px;
}

.nube1:before {
  width: 90px; height: 90px;
  top: -30px; right: 50px;
  border-radius: 200px;
}

.nube2 {
  position: absolute;
  width: 300px;
  height: 100px;
  background: var(--nube);
  margin: 0px 140px;
  border-radius: 60px;
  z-index: 999;
  animation: mov2 20s cubic-bezier(.87,.67,.83,.67) infinite;
}

.nube2:after, .nube2:before {
  content: '';
  position: absolute;
  background: var(--nube);
  z-index: 999;
}

.nube2:after {
  width: 140px; height: 140px;
  top: -50px; left: 50px;
  border-radius: 100px;
}

.nube2:before {
  width: 90px; height: 90px;
  top: -30px; right: 50px;
  border-radius: 200px;
}

@keyframes mov1 {
  from {
    margin-left: 70%;
  }
  
  to {
    margin-left: -70%;
  }
}

@keyframes mov2 {
  from {
    margin-left: 70%;
  }
  
  to {
    margin-left: -70%;
  }
}

Puedes realizar tu aporte aquí:

USD