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.
<!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.😋
