Para no perder la costumbre es el turno ahora de los personajes de Avengers animados en CSS. Estos personaje se encuentran dibujados y animados por medio del código CSS3.
El código que se presenta a continuación fue elaborado por Mario Sanchez. En el siguiente link pueden revisar el sitio oficial.
*HTML
---------------------------------------
<div class="wrapper">
<div class="hulk">
<div class="head"><div class="mouth"></div></div>
<div class="right-arm"></div>
<div class="fist"></div>
<div class="left-arm"></div>
<div class="body"></div>
<div class="right-leg"></div>
<div class="left-leg"></div>
</div>
<div class="captain">
<div class="head">A</div>
<div class="body"><div class="star"></div></div>
<div class="arms"></div>
<div class="shield"><div class="star"></div></div>
<div class="hands"></div>
<div class="legs"></div>
<div class="boots"></div>
</div>
<div class="ironman">
<div class="helmet"><div class="mask"></div></div>
<div class="right-arm"></div>
<div class="left-arm"></div>
<div class="body"><div class="power"></div></div>
<div class="right-leg"></div>
<div class="left-leg"></div>
</div>
<div class="thor">
<div class="helmet"></div>
<div class="head">
<div class="beard"></div>
</div>
<div class="cap"></div>
<div class="arm-right"></div>
<div class="arm-left"></div>
<div class="body"></div>
<div class="hammer"></div>
<div class="legs"></div>
<div class="feet"></div>
</div>
</div>
</div>
*CSS3
---------------------------------------
$verdeHulk: #bdbd00;
$hulkPants:#581bbb;
$body:#43abf0;
$bodyShadow:#29708f;
$white:#fff;
$whiteShadow:#ffffcb;
$red:#b63700;
$skin: #fdb0a4;
$shield:#c53905;
$ironbody:#ab3300;
$irondetail:#deb800;
$ironShadow:#c98700;
$thorbody:#004278;
$thorshadow:#00272b;
$thorskin:#ffcee7;
$thorskinShadow:#ffc688;
$hammer:#382727;
$time:7s;
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin star($top, $left) {
display: block;
color: $white;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid $white;
border-left: 10px solid transparent;
margin-top: $top;
margin-left: $left;
position: absolute;
transform: rotate(35deg);
&::before {
border-bottom: 8px solid $white;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: relative;
height: 0;
width: 0;
top: -4px;
left: -6px;
display: block;
content: '';
transform: rotate(-35deg);
}
&::after {
position: absolute;
display: block;
color: red;
top: 0px;
left: -10px;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid $white;
border-left: 10px solid transparent;
transform: rotate(-70deg);
content: '';
}
}
*, *:before, *:after {
box-sizing:border-box;
}
body{
font-size:16px;
position:absolute;
width:100%;
height:100%;
}
.wrapper {
position:relative;
width:550px;
height:365px;
margin:15% auto;
animation: shake $time infinite;
}
//HULK
.hulk{
position:absolute;
margin-left:200px;
bottom:0px;
margin-bottom:300px;
.head {
width: 4.713em;
position:absolute;
margin-top:-2.75em;
margin-left:3.563em;
border-bottom: 3.75em solid $verdeHulk;
border-left: 0.938em solid transparent;
border-right: 0.938em solid transparent;
height: 0;
z-index:10;
&::after {
content:"";
width:2.25em;
height:0.375em;
position:absolute;
margin-top:0.538em;
margin-left:0.313em;
background:#034600;
}
&::before{
content:"";
width:3.25em;
height:0.75em;
position:absolute;
margin-top:-0.75em;
margin-left:-0.25em;
background:#034600;
border-top-left-radius: 1.875em;
border-top-right-radius:1.875em;
}
}
.mouth {
width:31px;
height:0px;
position:absolute;
margin-top:25px;
margin-left:8px;
overflow:hidden;
background-image:
linear-gradient(
to bottom,
#fff,
#fff 25%,
#4b0a00 25%,
#4b0a00 70%,
#fff 75%,
#fff 100%
);
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
animation: mouthOpen $time infinite;
&::before{
content:"";
width: 10px;
height:7px;
position:absolute;
background:#902e2b;
margin-top:9px;
margin-left:11px;
border-top-left-radius:0.5em;
border-top-right-radius: 0.5em;
}
}
.right-arm{
width:13.313em;
height:13.75em;
margin-top:1em;
margin-left:2em;
border-radius:50%;
background: #b5b500;
position:absolute;
clip: rect(-1em, 11.2em, 12.55em, 7.625em);
animation: hulkRightarm $time infinite;
&::after{
content:"";
width:12.063em;
height:9.625em;
border-radius:50%;
background:white;
position:absolute;
transform: translateY(1.25em);
margin-left:-3.313em;
}
}
.left-arm
{
width:13.313em;
height:13.75em;
margin-top:1em;
margin-left:-4.3em;
border-radius:50%;
background: #949400;
position:absolute;
clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
animation: hulkLeftarm $time infinite;
&::after{
content:"";
width: 12.063em;
height: 9.625em;
border-radius: 50%;
background: white;
position: absolute;
transform: translateY(1.25em);
margin-left: 4.563em;
}
}
.fist{
width: 4.375em;
height: 4.375em;
position: absolute;
border-radius: 50%;
margin-top: 11.7em;
margin-left: -2.1em;
background:#949400;
box-shadow: 11.1em 0 0 #b5b500;
z-index: 10;
animation: hulkHands $time infinite;
}
.body {
width: 12.5em;
height: 12.5em;
background: $verdeHulk;
border-radius: 50%;
position: absolute;
box-shadow: inset
1.125em 0 0 darken($verdeHulk, 5%),
-0.938em 0 0 darken($verdeHulk, 10%);
z-index:10;
&::before{
content:"";
width: 0.75em;
height: 0.75em;
border-radius: 50%;
position: absolute;
margin-top: 3.125em;
margin-left: 1.375em;
background: darken($verdeHulk,10%);
box-shadow: 7.625em 0 0 darken($verdeHulk, 10%);
}
&::after{
content:"";
position:absolute;
width:0.313em;
height:0.313em;
border-radius:50%;
margin-top:10em;
margin-left:5.625em;
background:darken($verdeHulk,10%);
box-shadow: 0 2.625em 0 #9ac7f1
}
}
.right-leg {
width:0.625em;
height:6.438em;
position:absolute;
margin-left:4.25em;
margin-top:12.3em;
background-image:
linear-gradient(
to bottom,
darken($hulkPants,20%),
darken($hulkPants,20%) 50%,
darken($verdeHulk,20%) 50%,
darken($verdeHulk,20%) 100%
);
animation:hulkPants2 $time infinite ;
&::after{
content:"";
width:0.938em;
height:0.875em;
position:absolute;
margin-left:0.625em;
background:darken($hulkPants, 10%);
}
&::before {
content:"";
width:1.125em;
height:0.188em;
position:absolute;
margin-top:6.25em;
margin-left:-1.125em;
background:darken($verdeHulk,20%);
}
}
.left-leg{
width:0.625em;
height:6.438em;
position:absolute;
margin-left:6.688em;
margin-top:12.3em;
background-image:
linear-gradient(
to bottom,
$hulkPants,
$hulkPants 50%,
$verdeHulk 50%,
$verdeHulk 100%
);
animation:hulkPants $time infinite ;
&::after{
content:"";
width:0.938em;
height:0.875em;
position:absolute;
background:$hulkPants;
margin-left:-0.938em;
}
&::before {
content:"";
width:1.125em;
height:0.188em;
position:absolute;
margin-top:6.25em;
margin-left:0.625em;
background:$verdeHulk;
}
}
}
//CAPTAIN AMERICA
.captain {
position: absolute;
z-index: 1000;
margin-left: 355px;
bottom: 0px;
margin-bottom: 146px;
.head {
width: 21px;
height: 36px;
background: $body;
position: absolute;
margin-top: -36px;
margin-left: 44px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: $white;
text-align: center;
font-size: 0.6em;
font-weight: bold;
&::before{
content:"";
width: 21px;
height: 17px;
background: $skin;
position: absolute;
margin-left: -7px;
margin-top: 19px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: inset 8px 0 0 0 darken($skin, 5%);
}
&::after {
content: "";
width: 4px;
height: 4px;
position: absolute;
background: $skin;
border-radius: 50%;
margin-top: 16px;
margin-left: -5px;
}
}
.body
{
height: 53px;
width: 107px;
border-radius: 0 0 110px 110px;
background: $body;
box-shadow: inset 8px 0px 0 0 $bodyShadow, inset 17px 0px 0 0 darken($body,3%);
z-index: 5;
&::before {
content:"";
width: 133px;
height: 30px;
margin-left: -14px;
position: absolute;
border-radius: 30px;
background-image: linear-gradient(to right,$bodyShadow, $body);
z-index:-1;
}
&::after{
content:'';
width: 30px;
height: 10px;
position: absolute;
margin-top: 49px;
margin-left: 38px;
background-image: linear-gradient(to right, darken($red,5%), darken($red,5%) 30%, $whiteShadow 30%, $whiteShadow 70%, $red 70%, $red 100%);
}
.star{
@include star(18px,43px)
}
}
.arms {
width: 10px;
height: 60px;
position: absolute;
background: $whiteShadow;
margin-top: -30px;
margin-left: 10px;
box-shadow: 75px 0 0 0 $whiteShadow;
z-index: -1;
&::before{
content:"";
width: 28px;
height: 50px;
position: absolute;
background: $whiteShadow;
border-radius: 30% 50%;
margin-left: -18px;
margin-top: -3px;
box-shadow: 95px 0 0 0 $whiteShadow;
}
}
.shield {
width: 40px;
height: 40px;
background: $body;
border-radius: 50%;
position: absolute;
z-index: 100;
margin-left: 75px;
margin-top: 30px;
box-shadow: 0 0 0 8px $whiteShadow, 0 0 0 18px $shield;
transform:rotate(-30deg);
.star{
@include star(15px,10px);
}
}
.hands {
width: 15px;
height: 30px;
position: absolute;
margin-top: 29px;
margin-left: 8px;
background: darken($red, 3%);
transform: skew(10deg);
&::before {
content:"";
width: 10px;
height: 30px;
background: darken($verdeHulk, 2%);
position: absolute;
margin-left: 12px;
transform: skew(-10deg);
}
&::after {
content:"";
width: 13px;
height: 13px;
border-radius: 50%;
position: absolute;
margin-top: 21px;
margin-left: -1px;
background: darken($red, 3%);
}
}
.legs {
width: 8px;
height: 100px;
background: $bodyShadow;
position:absolute;
margin-left: 38px;
margin-top: 5px;
box-shadow: 22px 0 0 0 $body;
&::before {
content:"";
width: 30px;
height: 5px;
background: darken($red,20%);
position:absolute;
}
&::after {
content: "";
width: 14px;
height: 9px;
background-image: linear-gradient(to right, $bodyShadow, $body);
position: absolute;
margin-left: 8px;
margin-top: 5px;
}
}
.boots {
width: 10px;
height: 41px;
position: absolute;
margin-top: 105px;
margin-left: 37px;
background: darken($red, 10%);
box-shadow: 22px 0 0 0 $red;
&::after {
content:"";
width: 25px;
height: 2px;
position: absolute;
background: darken($red, 10%);
margin-top: 39px;
margin-left: -15px;
box-shadow: 40px 0 0 0 $red;
}
&::before{
content: "";
width: 18px;
height: 12px;
background: darken($red, 10%);
position: absolute;
margin-left: -4px;
box-shadow: 22px 0 0 0 $red;
}
}
}
//IRONMAN
.ironman {
position: absolute;
z-index: 900;
margin-left: 0;
margin-bottom:135px;
bottom:0;
.helmet {
width:22px;
height:34px;
background:$ironbody;
position: absolute;
margin-top: -33px;
margin-left: 44px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow:hidden;
&::before {
content:"";
width:7px;
height:2px;
background:white;
position:absolute;
margin-top:10px;
margin-left:0px;
z-index:3;
box-shadow:15px 0 0 0 white;
}
}
.mask{
width:10px;
height:18px;
background:$irondetail;
position:relative;
margin-top:7px;
margin-left:6px;
&::before {
content:"";
width:13px;
height:18px;
background:$irondetail;
position:absolute;
transform:rotate(60deg);
margin-top:-3px;
margin-left:4px;
}
&::after {
content:"";
width:13px;
height:18px;
background:$irondetail;
position:absolute;
transform:rotate(-60deg);
margin-top:-3px;
margin-left:-5px;
}
}
.body {
height: 53px;
width: 107px;
border-radius: 0 0 110px 110px;
background: $ironbody;
box-shadow: inset 10px 0px 0 0 darken($ironbody,5%), inset 20px 0px 0 0 darken($ironbody,3%);
padding-top:11px;
z-index:50;
&::before {
content:"";
width:32px;
height:32px;
background: darken( $ironbody, 5%);
position:absolute;
border-radius:50%;
margin-left:-15px;
margin-top:-18px;
box-shadow:105px 0 0 0 $ironbody;
z-index:50;
}
&::after {
content:"";
width:40px;
height:30px;
position:absolute;
margin-top:20px;
margin-left:35px;
background-image:
linear-gradient(
to right,
darken($ironbody, 5%),
darken($ironbody, 5%) 15%,
darken($ironbody, 3%) 15%,
darken($ironbody, 3%) 29%,
$ironbody 20%,
$ironbody 20%
);
}
}
.power {
width:17px;
height:17px;
background:white;
border-radius:50%;
margin:0 auto;
box-shadow:0 0 0 5px $irondetail;
}
.left-leg {
width:10px;
height:90px;
background: $ironShadow;
position:absolute;
margin-left:35px;
margin-top:12px;
border-top-right-radius:10px;
&::before {
content:"";
width:25px;
height:65px;
background: darken($ironbody,5%);
position:absolute;
border-top-right-radius:20px;
margin-top:60px;
margin-left:-10px;
}
}
.right-leg {
width:10px;
height:90px;
background: $irondetail;
position:absolute;
margin-left:65px;
margin-top:12px;
border-top-left-radius:10px;
&::before {
content:"";
width:25px;
height:65px;
background: $ironbody;
position:absolute;
border-top-left-radius:20px;
margin-top:60px;
margin-left:-5px;
}
}
.left-arm{
width:10px;
height:45px;
background:$ironShadow;
position:absolute;
margin-left:-6px;
margin-top:18px;
border-bottom-left-radius:20px;
&::before {
content:"";
height: 60px;
width: 31px;
border-radius: 60px 0px 0px 60px;
background: darken($ironbody,5%);
position:absolute;
margin-top:30px;
margin-left:-21px;
z-index:-1;
}
&::after {
content:"";
width:10px;
height:10px;
border-radius:50%;
background: darken($ironbody,5%);
position:absolute;
margin-top:80px;
margin-left:5px;
}
}
.right-arm{
width:10px;
height:45px;
background:$ironShadow;
position:absolute;
margin-left:105px;
margin-top:18px;
border-bottom-right-radius:20px;
&::before {
content:"";
height: 60px;
width: 31px;
border-radius: 0px 60px 60px 0px;
background: $ironbody;
position:absolute;
margin-top:30px;
margin-left:0px;
z-index:-1;
}
&::after {
content:"";
width:10px;
height:10px;
border-radius:50%;
background:$ironbody;
position:absolute;
margin-top:80px;
margin-left:-5px;
}
}
}
//THOR
.thor{
position:absolute;
margin-left:118px;
z-index:1000;
margin-bottom:220px;
bottom:0;
.helmet{
width: 0;
height: 0;
position:absolute;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-bottom: 40px solid #d7a900;
margin-top:-40px;
margin-left:42px;
box-shadow:0 -18px 0 -16px #66999a;
&::before {
content:"";
width:13px;
height:25px;
position:absolute;
background:#66999a;
margin-left:-19px;
margin-top:-12px;
border-bottom-left-radius:10px;
border-top-right-radius:15px;
box-shadow:inset -3px 0px 0 transparent;
}
&::after {
content:"";
width:13px;
height:25px;
position:absolute;
background:#89b9ef;
margin-left:10px;
margin-top:-12px;
border-bottom-right-radius:10px;
border-top-left-radius:15px;
box-shadow:inset -3px 0px 0 transparent;
}
}
.head {
width:21px;
height:40px;
background-image:linear-gradient(#72a9d5, #72a9d5 32%,#ffdeef 10%);
position:absolute;
margin-top:-40px;
margin-left:50px;
border-radius:30px 30px 0 0;
overflow:hidden;
&::after {
content:"";
width:10px;
height:17px;
background:#d7a900;
position:absolute;
border-radius:10px 10px 0px 0px;
margin-top:20px;
margin-left:5px;
}
.beard{
width:21px;
height:5px;
background:#d7a900;
position:absolute;
margin-top:12px;
&::before {
content:"";
width:11px;
height:5px;
background:#d7a900;
position:absolute;
margin-left:12px;
margin-top:17px;
transform:rotate(-40deg);
}
&::after {
content:"";
width:11px;
height:5px;
background:#d7a900;
position:absolute;
margin-left:-3px;
margin-top:17px;
transform:rotate(40deg);
}
}
}
.body {
border-top: 65px solid $thorbody;
border-left: 40px solid transparent;
border-right:40px solid transparent;
height: 0;
width: 120px;
position:absolute;
&::before {
content:"";
width:40px;
height:5px;
position:absolute;
background-image: linear-gradient(to right, #c98700, #d7a900);
}
&::after {
content:"";
width:30px;
height:30px;
border-radius:50%;
position:absolute;
background:#94bdef;
margin-top:-60px;
margin-left:-17px;
box-shadow:45px 0 0 0 #94bdef,
10px 29px 0 -5px #94bdef,
35px 29px 0 -5px #94bdef
;
}
}
.arm-right {
width:40px;
height:40px;
background:$thorskin;
border-radius:50%;
position:absolute;
margin-left:100px;
box-shadow:-5px 0 0 $thorskin, -10px 0 0 $thorskin,-15px 0 0 $thorskin, -20px 0 0 $thorskin, -20px 90px 0 -15px $thorskin, -20px 95px 0 -15px $thorskin, -20px 100px 0 -15px $thorskin
;
&::before {
content:"";
width:40px;
height:100px;
position:absolute;
background:$thorskin;
margin-left:-5px;
margin-top:10px;
border-bottom-right-radius:30px;
}
&::after {
content:"";
width:10px;
height:5px;
background:#290000;
position:absolute;
margin-top:113px;
margin-left:-5px;
}
}
.arm-left {
width:40px;
height:40px;
background:$thorskinShadow;
border-radius:50%;
position:absolute;
margin-left:0px;
box-shadow:-5px 0 0 $thorskinShadow, -10px 0 0 $thorskinShadow,-15px 0 0 $thorskinShadow, -20px 0 0 $thorskinShadow, 0 90px 0 -15px $thorskinShadow,0 95px 0 -15px $thorskinShadow, 0 100px 0 -15px $thorskinShadow;
&::before {
content:"";
width:40px;
height:100px;
position:absolute;
background:$thorskinShadow;
margin-left:-15px;
margin-top:10px;
border-bottom-left-radius:30px;
}
&::after {
content:"";
width:10px;
height:5px;
background:#290000;
position:absolute;
margin-top:113px;
margin-left:15px;
}
}
.legs{
width:13px;
height:67px;
background:darken($thorbody,7%);
position:absolute;
margin-top:70px;
left:40px;
border-radius:0 0 30px 30px;
box-shadow:27px 0 0 0 $thorbody;
&::before {
content:"";
width:10px;
height:75px;
position:absolute;
background:darken($thorbody,7%);
margin-left:5px;
box-shadow: 0 75px 0 0 #b75600, 21px 0 0 0 $thorbody, 21px 75px 0 0 #ce9700;
}
&::after {
content:"";
width:11px;
height:10px;
background-image: linear-gradient(darken($thorbody,7%), $thorbody);
position:absolute;
margin-left:15px;
}
}
.cap {
width:120px;
height:200px;
position:absolute;
background:#a72300;
z-index:0;
box-shadow:inset 10px 0 0 #721200, inset 20px 0 0 #7b1e00;
}
.hammer {
width:42px;
height:27px;
position:absolute;
background: $hammer; /* fallback */
background:
linear-gradient(135deg, transparent 5px, $hammer 0) top left,
linear-gradient(225deg, transparent 5px, $hammer 0) top right,
linear-gradient(315deg, transparent 5px, $hammer 0) bottom right,
linear-gradient(45deg, transparent 5px, $hammer 0) bottom left;
background-size: 52% 52%;
background-repeat: no-repeat;
margin-top:148px;
margin-left:1px;
&::before{
content:"";
width:6px;
height:25px;
background:darken($hammer,5%);
position:absolute;
margin-top:-23px;
margin-left:18px;
}
&::after {
content:"";
width:6px;
height:3px;
position:absolute;
background:darken($hammer,5%);
margin-top:25px;
margin-left:18px;
}
}
.feet {
width:25px;
height:2px;
position:absolute;
background:#b75600;
margin-top:220px;
margin-left:30px;
box-shadow:36px 0 0 #ce9700;
&::after {
content:"";
height:10px;
width:20px;
position:absolute;
border-radius: 90px 90px 0 0;
background:#ce9700;
margin-top:-85px;
margin-left:8px;
box-shadow:24px 0 0 #b75600;
}
}
}
/*Hand Animation*/
@include keyframes(shake) {
78%, 80%,82%,84%,86%,88%,90%,92% {
top:3px;
left:2px;
}
79%,81%,83%,85%,87%,89%,91% {
top:0px;
left:-2px;
}
}
@include keyframes(mouthOpen) {
77%{height:0px;}
80%{
height:22px;
}
93%{
height:22px;
opacity:1;
}
95%{
height:0px;
opacity:0;
}
}
@include keyframes(hulkHands){
6%{
box-shadow: 11.1em 0 0 #b5b500;
}
77%{
box-shadow: 11.1em 0 0 #b5b500;
margin-left:-2.1em;
@include translate (0,0)
}
80%{
margin-left:0.5em;
box-shadow:8.5em 0 0 #b5b500;
@include translate (-0.9em,-19.9em)
}
93%{
margin-left:0.5em;
box-shadow:8.5em 0 0 #b5b500;
@include translate (-0.9em,-19.9em)
}
94%{
box-shadow: 11.1em 0 0 #b5b500;
margin-left:-2.1em;
@include translate (0em,-0em)
}
}
@include keyframes(hulkRightarm){
77%{
margin-top:1em;
margin-left:2em;
clip: rect(-1em, 11.2em, 12.55em, 7.625em);
}
80%{
margin-top:-8.125em;
margin-left:2.5em;
clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
}
93%{
margin-top:-8.125em;
margin-left:2.5em;
clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
}
95%{
margin-top:1em;
margin-left:2em;
clip: rect(-1em, 11.2em, 12.55em, 7.625em);
}
}
@include keyframes(hulkLeftarm){
77%{
margin-top:1em;
margin-left:-4.3em;
clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
}
80%{
margin-top:-8.125em;
margin-left:-4.375em;
clip: rect(-0.188em, 6.563em, 13.875em, 0em);
}
93%{
margin-top:-8.125em;
margin-left:-4.375em;
clip: rect(-0.188em, 6.563em, 13.875em, 0em);
}
95%{
margin-top:1em;
margin-left:-4.3em;
clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
}
}
---------------------------------------
No hay comentarios:
Publicar un comentario