El código CSS haciendo como siempre de las suyas... Ahora es el turno de uno de los personajes más emblemáticos de los Xmen, Cíclope o Cyclops. Este personaje se encuentra dibujado y animado por medio del código CSS3.
El código que se presenta a continuación fue elaborado por Avi Goldman. En el siguiente link pueden revisar el sitio oficial.
*HTML
---------------------------------------
---------------------------------------
<div class="x" id="x-right"></div>
<div id="name">
<span>Cyclops</span>
</div>
<div id="container">
<div id="head">
<div id="hair">
<div id="hair-curl"></div>
<div id="hair-left"></div>
<div id="hair-right"></div>
<div id="hair-trim"></div>
</div>
<div id="visor">
<div class="visor-end" id="left-end">
<span></span>
</div>
<div class="visor-end" id="right-end">
<span></span>
</div>
<div id="inner-main"></div>
</div>
<div id="nose"></div>
<div id="mouth"></div>
<div id="chin"></div>
</div>
<div id="body">
<div id="symbol"><span>X</span></div>
<div id="arms"></div>
</div>
</div>
---------------------------------------
*CSS3
---------------------------------------
---------------------------------------
body {
background:#eee;
}
#container {
border-radius:100%;
border:10px #282828 solid;
height:400px;
width:400px;
padding:40px;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
overflow:hidden;
-webkit-animation:container-load 1.2s;
}
.x {
height:60px;
width:490px;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
background:#282828;
}
#x-left {
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-webkit-animation:x 1.7s, x-rotate-left 20s infinite linear 4s;
}
#x-right {
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-webkit-animation:x 1.7s, x-rotate-right 20s infinite linear 4s;
}
#head {
/*-webkit-transform:rotateY(30deg);*/
width: 196px;
height: 220px;
border-radius: 80px 80px 0px 0px;
background: #f8debb;
position:relative;
margin:auto;
border-top:10px #472200 solid;
-webkit-animation:head-bob 1.7s linear infinite;
}
#hair {
position:absolute;
height:100px;
width:180px;
border-top:10px #472200 solid;
border-left:10px #472200 solid;
border-right:10px #472200 solid;
border-bottom:none;
border-radius:180px;
background:#472200;
top:0;
left:-1px;
}
#hair-left {
background:#472200;
float:left;
height:48px;
width:9px;
margin-top:32px;
margin-left:-9px;
border-radius:0px 0px 50px 50px;
}
#hair-right {
background:#472200;
float:right;
height:48px;
width:9px;
margin-top:32px;
margin-right:-9px;
border-radius:0px 0px 50px 50px;
}
#hair-curl {
position:absolute;
height:50px;
width:110px;
border-right:10px #472200 solid;
border-bottom:none;
border-radius:30px;
top:0px;
-webkit-animation:hair 0s linear infinite;
}
#hair-trim {
background:#f8debb;
height:60px;
width:160px;
margin:15px auto 0px auto;
border-radius:60px 60px 0px 0px;
}
#visor {
background: #45484d;
width:100%;
padding:10px 0px;
height:15px;
position:absolute;
top:85px;
box-shadow:0px 1px 3px black;
}
#inner-main {
background: #cc0000;
height:100%;
width:90%;
margin:auto;
border-radius:10px;
box-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #FF1177,0 0 20px #FF1177;
background:white;
}
.visor-end {
width: 18px;
height: 60px;
-webkit-animation:face 1.7s;
position: relative;
}
.visor-end span {
display:block;
position:relative;
top:15px;
height:30px;
background:#45484d;
}
#left-end {
left:-18px;
top:-18px;
float:left;
}
#left-end:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 15px solid #45484d;
border-left: 18px solid transparent;
width: 0px;
height: 0;
}
#left-end:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 15px solid #45484d;
border-left: 18px solid transparent;
width: 0px;
height: 0;
}
#right-end {
top:-18px;
right:-18px;
float:right;
}
#right-end:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-right: 18px solid transparent;
border-bottom: 15px solid #45484d;
width: 0px;
height: 0;
}
#right-end:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 15px solid #45484d;
border-right: 18px solid transparent;
width: 0px;
height: 0;
}
#nose {
background:#fdd7a3;
height:30px;
width:20px;
position:absolute;
left:0;
right:0;
margin:auto;
top:125px;
border-radius:30px 30px 15px 15px;
}
#mouth {
background:pink;
height:10px;
width:80px;
position:absolute;
left:0;
right:0;
margin:auto;
top:215px;
z-index:1;
border-radius:5px 5px 0px 0px;
}
#chin {
border-top: 50px solid #f8debb;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 97px;
position:absolute;
bottom:0px;
margin-bottom:-48px;
}
#body {
background:#111111;
height:250px;
width:250px;
margin:auto;
margin-top:40px;
border-radius:56px;
}
#symbol {
border:2px silver solid;
border-radius:100%;
height:28px;
width:28px;
float:right;
margin-top:40px;
margin-right:55px;
color:silver;
font-family: 'Syncopate', sans-serif;
font-size:30px;
text-align:center;
}
#symbol span {
position:relative;
top:-2px;
}
#arms {
border-left:3px silver solid;
border-right:3px silver solid;
width:64%;
height:100%;
position:relative;
top:65px;
margin: auto;
}
#name {
position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
height:100px;
width:500px;
z-index:1;
font-family: 'Oswald', sans-serif;
font-size:34px;
text-align:center;
text-transform:uppercase;
text-shadow:0px 12px 10px grey;
}
#name span {
position:relative;
top:300px;
}
/*animations*/
@-webkit-keyframes container-load {
0% { height: 0; width: 0;}
}
@-webkit-keyframes x {
0% { height: 0; width: 0; -webkit-transform:rotate(0deg);}
50% { height: 0; width: 0; -webkit-transform:rotate(0deg);}
75% {-webkit-transform:rotate(0deg);}
100%; {}
}
@-webkit-keyframes x-rotate-left {
0% {}
7% {-webkit-transform:rotate(225deg);}
50% {-webkit-transform:rotate(225deg);}
57% {-webkit-transform:rotate(45deg);}
}
@-webkit-keyframes x-rotate-right {
0% {}
7% {-webkit-transform:rotate(135deg);}
50% {-webkit-transform:rotate(135deg);}
57% {-webkit-transform:rotate(-45deg);}
}
@-webkit-keyframes head-bob- {
0% {-webkit-transform: rotate(0deg);}
10% {-webkit-transform: rotate(5deg);}
20% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(-5deg);}
40% {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes hair {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(20deg);top:-20px;}
40% {-webkit-transform: rotate(-10deg);top:10px;}
50% {-webkit-transform: rotate(0deg);top:0px;}
100% {}
}
---------------------------------------
No hay comentarios:
Publicar un comentario