Publicidad

Introducción:

En este ejemplo vamos a crear un muñeco o minion (la verdad no se bien como llamarlo); pero la idea es que este muñequito sonríe, en eso consiste esta animación. Se que es sencillo, al menos esta vez puse las etiquetas en el orden adecuado (eso creo).😋

Creando un Muñequito con CSS

A continuación veremos el código en HTML, ya que necesitamos empezar por la estructura.

Publicidad
<!DOCTYPE html>
<html lang="en-ES">
    <head>
	    <meta charset="UTF-8">
	    <title>doll</title>
	</head>
    <body>
        <div class="container-0">
	        <div class="message">
                <h1 class="text"> I will kill you</h1>
		    </div>	
		    <div class="head" id="Color" >
		        <div id="eye-1">
			        <div class="pupil-1"></div>
                    <div class="pupil-2"></div>
		        </div>				
		        <div id="eye-2">
                    <div class="pupil-1"></div>
                    <div class="pupil-2right"></div>
		        </div>
	        </div>
	        <div class="mouth"></div>
        	<div class="body" id="Color"></div>
        	<div class="arm1" id="Color"></div>	
            <div class="arm2" id="Color"></div>
            <div class="leg1" id="Color"></div>
            <div class="leg2" id="Color"></div>
        </div>			
        <script src="codigo.js"></script>
    </body>
</html>

Ahora vamos a continuar agregando el CSS, con la intención de ir dibujando las partes del cuerpo, en esto creo que pude ahorrarme algunas líneas de código y no repetir atributos; pero aun no lo consigo. Bueno veamos el código en CSS.

#Color{
  background:darkorange;
}

.text{
  text-align:center;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color:white;
}

.message{
  height: 60px;
  width: 250px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 62% 100%, 60% 77%, 0% 75%);
  background: black;
  margin:0 auto;
  animation:MessageOn 6s infinite;
}

.container-0{
  position:absolute;
  margin:0 auto;
  left: 0px;
  right: 0px;
  background:transparent;
  width: 800px;
  height: 800px;
  z-index: -1;
}

.head{
    width: 300px;
    height: 300px;
    position:absolute;
    margin:0 auto;
    left: 0px;
    right: 0px;
    border-radius: 50%;
    animation:BodyChange 1s infinite;
}

.body{
    width: 300px;
    height: 250px;
    border-radius: 25px 25px 50px 50px;
    position:absolute;
    margin:0 auto;
    left: 0px;
    right: 0px;
    top:200px;
    z-index:-1;
}

.arm1{
     width: 70px;
     height: 200px;
     z-index:-1;
     position:absolute;
     margin:0 auto;
     left: 190px;
     top: 235px;
     border-radius: 50px 0px 50px 50px;
     transform: rotate(45deg);
}

.arm2{
     width: 70px;
     height: 200px;
     background: #ff62ab;
     z-index:-1;
     position:absolute;
     margin:0 auto;
     right: 190px;
     top: 235px;;
     border-radius: 50px 0px 50px 50px;
     transform: rotate(-45deg);
}

.leg1{
     width: 70px;
     height: 250px;
     z-index:-1;
     position:absolute;
     margin:0 auto;
     left: 440px;
     top: 310px;
     border-radius: 0px 0px 20px 20px;
}

.leg2{
     width: 70px;
     height: 250px;
     z-index:-1;
     position:absolute;
     margin:0 auto;
     right: 440px;
     top: 310px;
     border-radius: 00px 0px 20px 20px;
     transform: rotateY(180deg);
}

#eye-1{
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: black;
  margin-top: 90px;
  margin-left: 50px;
}

#eye-2{
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: black;
  margin-top: -43px;
  margin-left: 210px;
}

.pupil-1{
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 20px;
    margin: 0px 0px 0px 10px;
}

.pupil-2{
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 5px;
    margin: 5px 0px 0px 10px;
}

.pupil-2right{
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 5px;
    margin: 5px 0px 0px 15px;
}

.mouth{
  Background: #000;
  height:110px;
  width: 7px;
  border-radius:3px;
  transform: rotate(-90deg);
  position: absolute;
  margin:0 auto;
  left: 0px;
  right: 0px;
  top: 200px;
  animation:MouthChange 6s infinite;
}

Como pueden ver en el código ya esta escrita la parte en la que establecemos la animación, entonces solo queda definirla, como lo vemos más abajo.

@keyframes MessageOn{
  0%{
    background:transparent;
    color:transparent;
  }
  25% {
    background:transparent;
    color:transparent;
  }
  50%{
    background: black;
    color: white;
  }
  100%{
    background:transparent;
    color:transparent;
  }

}

@keyframes MouthChange{
  0%{
    height:110px;
    width: 7px;
    border-radius:3px;
  }
  50%{
    height: 150px;
    width: 75px;
    border-radius: 160px 0 0 160px;
  }
  100%{
    height:110px;
    width: 7px;
    border-radius:3px;
  }
}

Pueden ver y descargar los archivos con el código aquí, y si desean ver este código corriendo o funcionando clic aquí.

Extra:

  • Para ver una animación anterior de Tetris clic aquí ( es más cool a mi parecer).
  • Para saber sobre rutas y carpetas (directorios) o archivos en HTML clic aquí.

Y eso es todo, no es una explicación muy detallada porque tardaría más en publicar algo nuevo.😋

 

Publicidad


Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments