<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 永恒的精灵女神</title>
<style>
body {
background: #121212;
}
.contenedor {
position: relative;
width: 800px;
height: 900px;
margin: 90px auto;
}
.sai {
position: absolute;
margin: 30px 30px;
animation: vuela7 1.2s alternate infinite;
-moz-animation: vuela7 1.2s alternate infinite;
-webkit-animation: vuela7 1.2s alternate infinite;
}
.cabeza {
position: absolute;
border-top: 80px solid #f9c493;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 90px;
margin: 80px 283px;
}
.cabeza::before {
content: "";
display: block;
width: 21px;
height: 150px;
border-top: 40px solid #f9c493;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
-moz-border-radius: 100px / 100px;
-webkit-border-radius: 100px / 100px;
border-radius: 100px / 100px;
margin: -129px 25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.cabeza::after {
content: "";
display: block;
width: 21px;
height: 150px;
border-top: 40px solid #f9c493;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
-moz-border-radius: 100px / 100px;
-webkit-border-radius: 100px / 100px;
border-radius: 100px / 100px;
margin: -190px -53px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.cara {
position: absolute;
width: 0;
height: 0;
border-left: 41px solid transparent;
border-right: 40px solid transparent;
border-top: 25px solid #f9c493;
margin: 166px 319px;
}
.cara::before {
content: "";
display: block;
border-bottom: 9px solid #f9c493;
border-left: 5px solid transparent;
border-right: 7px solid transparent;
height: 0;
width: 69px;
margin: -34px -41px;
}
.ojos {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
background: white;
border-top: 5px solid #333;
border-bottom: 3px solid #333;
margin: 107px 312px;
}
.ojos::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
background: white;
border-top: 5px solid #333;
border-bottom: 3px solid #333;
margin: -3px 63px;
}
.ojos3 {
position: absolute;
width: 21px;
height: 27px;
border-radius: 100%;
background: #0389c6;
margin: -1px 3px;
border: 2px solid #333;
}
.ojos3::before {
content: "";
position: absolute;
width: 21px;
height: 27px;
border-radius: 100%;
background: #0389c6;
margin: 0px 60px;
border: 2px solid #333;
}
.iris {
position: absolute;
width: 7px;
height: 7px;
border-radius: 100%;
background: black;
margin: 12px 7px;
}
.iris::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 100%;
background: black;
margin: 1px 63px;
}
.iris3 {
position: absolute;
width: 9px;
height: 16px;
border-radius: 100%;
background: white;
margin: 0 9px;
}
.iris3::before {
content: "";
position: absolute;
width: 9px;
height: 16px;
border-radius: 100%;
background: white;
margin: 2px 63px;
}
.iris5 {
position: absolute;
width: 18px;
height: 17px;
border-radius: 100%;
border-bottom: 7px solid #68aeb7;
margin: 3px 2px;
}
.iris5::before {
content: "";
position: absolute;
width: 18px;
height: 17px;
border-radius: 100%;
border-bottom: 7px solid #68aeb7;
margin: 1px 65px;
}
.iris7 {
position: absolute;
width: 6px;
height: 6px;
border-radius: 100%;
background: white;
margin: 19px 3px;
}
.iris7::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 100%;
background: white;
margin: 0px 63px;
}
.cejas {
position: absolute;
width: 12px;
height: 16px;
border-radius: 100%;
border-left: 3px solid #333;
margin: -14px -3px;
}
.cejas::before {
content: "";
position: absolute;
width: 12px;
height: 16px;
border-radius: 100%;
border-left: 3px solid #333;
margin: 0px 3px;
}
.cejas3 {
position: absolute;
width: 12px;
height: 16px;
border-radius: 100%;
border-right: 3px solid #333;
margin: -14px 67px;
}
.cejas3::before {
content: "";
position: absolute;
width: 12px;
height: 16px;
border-radius: 100%;
border-right: 3px solid #333;
margin: 0px -6px;
}
.cejas5 {
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
border-right: 2px solid #333;
margin: 27px -3px;
}
.cejas5::before {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
border-right: 2px solid #333;
margin: 0px 5px;
}
.cejas7 {
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
border-left: 2px solid #333;
margin: 29px 70px;
}
.cejas7::before {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
border-left: 2px solid #333;
margin: -1px 2px;
}
.nariz {
position: absolute;
width: 1px;
height: 23px;
background: gray;
margin: 127px 357px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.nariz::before {
content: "";
display: block;
width: 7px;
height: 1px;
background: gray;
margin: 23px 0;
}
.boca {
position: absolute;
width: 9px;
height: 4px;
border-radius: 9px 9px 0 0;
background: #f49097;
margin: 160px 353px;
}
.boca::before {
content: "";
position: absolute;
width: 9px;
height: 4px;
border-radius: 9px 9px 0 0;
background: #f49097;
margin: 0px 8px;
}
.boca::after {
content: "";
position: absolute;
width: 19px;
height: 7px;
border-radius: 0 0 12px 12px;
background: #f49097;
margin: 1px -1px;
}
.iris7::after {
content: "";
position: absolute;
width: 5px;
height: 4px;
border-radius: 100%;
background: #fcc7d7;
opacity: 0.3;
margin: 30px 40px;
z-index: 333;
}
.orejas {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
background: #f9c493;
margin: 105px 287px;
}
.orejas::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
background: #f9c493;
margin: 0px 109px;
}
.cejas9 {
position: absolute;
width: 53px;
height: 40px;
border-radius: 100%;
border-top: 3px solid #c6947d;
margin: -21px -21px;
}
.cejas9::before {
content: "";
position: absolute;
width: 53px;
height: 40px;
border-radius: 100%;
border-top: 3px solid #c6947d;
margin: -2px 75px;
}
.hair {
position: absolute;
width: 90px;
height: 75px;
border-radius: 162px 162px 0 0;
background: #f79809;
margin: 6px 343px;
}
.hair::before {
content: "";
display: block;
width: 90px;
height: 75px;
border-radius: 162px 162px 0 0;
background: #f79809;
margin: 0px -60px;
}
.h1 {
position: absolute;
border-radius: 40px 40px 40px 40px;