<html>
<body>
<div class="contenedor">
<div class="sombra" id="azulsombra"></div> <div class="cara" id="azulpiel">
<div class="rostro" id="azulcara">
<!--roml-->
<div class="ojo"><div class="pupila"></div></div>
<div class="centro"><div class="pixel" id="azulpiel"><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel" id="negro"></div></div></div>
<div class="ojo"><div class="pupila"></div></div>
<!--roml-->
</div></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombra"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulsombrados"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulpiel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombra"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombra"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulsombratres"></div><div class="pixel" id="azulsombrados"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulpiel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombra"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulsombratres"></div><div class="pixel" id="azulsombrados"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulpiel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombratres"></div><div class="pixel" id="azulsombrados"></div><div class="pixel" id="azulsombratres"></div><div class="pixel" id="azulsombrados"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulcara"></div><div class="pixel" id="azulsombrados"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel" id="azulsombra"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel" id="azulpiel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="medio" id="azulsombratres"></div><div class="medio" id="azulsombrados"></div><div class="medio"></div><div class="medio" id="azulsombratres"></div><div class="medio" id="azulsombrados"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><!--roml-->
<div class="pixel" id="gris"></div><div id="piso"></div><!--roml-->
</div>
</body>
<style>
body{
background-color: black;
}
.contenedor{
width: 220px;
height: 300px;
margin: auto;
background-color: black;
}
.sombra{
width: 40px;
height: 140px;
float: left;
}
.cara{
width: 180px;
height: 140px;
float: left;
}
.rostro{
width: 140px;
height: 100px;
margin: 20px auto;
}
.pixel{
width: 20px;
height:20px;
float: left;
}
.medio{
width: 20px;
height: 10px;
float: left;
}
.ojo{
width: 60px;
height: 100px;
float: left;
}
.pupila{
width: 20px;
height: 40px;
margin: 25px auto;
background-color: black;
-webkit-animation: ojitos 2s linear infinite alternate;
-moz-animation: ojitos 2s linear infinite alternate;
animation: ojitos 2s linear infinite alternate;
}
.centro{
width: 20px;
height: 100px;
float: left;
}
#piso{
background-color: darkgray;
width: 200px;
height: 20px;
float: left;
}
#azulpiel{background-color: #00a7b0}
#azulcara{background-color: #cffcff}
#azulsombra{background-color: #007b83}
#azulsombrados{background-color: #8bf8fd}
#azulsombratres{background-color: #31d2dc}
#negro{background-color: black;}
#gris{background-color: gray;}
@-moz-keyframes ojitos{
0%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
33%{width: 40px;height: 40px;}
66%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
100%{width: 40px;height: 40px;}
}
@-webkit-keyframes ojitos{
0%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
33%{width: 40px;height: 40px;}
66%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
100%{width: 40px;height: 40px;}
}
@keyframes ojitos{
0%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
33%{width: 40px;height: 40px;}
66%{width: 50px;height: 50px;box-shadow: 0px 0px 0px 2px orange;}
100%{width: 40px;height: 40px;}
}
</style>
</html>
Una bonita animación con CSS
2 Responses
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.