Honguito de Mario Bros dibujado y animado con #CSS - Mushroom animation Mario Bros

En esta ocasión el turno es para uno de los personaje principales de Mario Bros, uno de mis juegos preferidos.

Honguito o conocido tambien como Toad era quien permitía en Mario Bros 1 a que Mario pueda crecer. Habían de dos tipos de color rojo (para crecer) y  de color verde (una vida adicional).

Honguito está dibujado y animado por medio de código CSS. El trabajo ha sido desarrollado por Klayton Faria, si desean pueden revisar su web site oficial.

En el siguiente link pueden ingresar al sitio oficial de la codificación. A continuación se adjunta el código respectivo.

*HTML
---------------------------------------
<div class="scene">
    <div class="mushroom walking">
        <div class="head">
            <div class="ball"></div>
        </div>
        <div class="face">
            <div class="eyes">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
    </div>
    <div class="floor">
        <div class="tube">
            <div class="top-tube"></div>
        </div>
    </div>
</div>
---------------------------------------

*CSS
---------------------------------------
$eyes-color: #303030;
$head-color: #F16F5C;
$face-color: #F3D4BA;

.scene {
    position: fixed;
    width:100%;
    height: 100%;
    bottom:0;
    padding-top: 20%;
    background: #259ad1;
    background: -moz-linear-gradient(top,  #259ad1 -24%, #FFF 123%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#259ad1), color-stop(100%,#FFF));
    background: -webkit-linear-gradient(top,  #259ad1 -24%,#FFF 123%);
    background: linear-gradient(to bottom,  #259ad1 -24%,#FFF 123%);  
}
.mushroom {
   position: absolute;
   width: 200px;
   height: 155px;
   z-index: 2;
  bottom: 112px;
   * {
       Box-sizing: Border-box;
    }

  .head {
    width: 100%;
    height: 100%;
    overflow:hidden;
    border-radius: 100% 100% 90% 90%;
    background: -webkit-radial-gradient(100px 50px, circle, $head-color, ($head-color - 100));
    background: -moz-radial-gradient(100px 50px, circle, $head-color, ($head-color - 100));
    background: radial-gradient(100px 50px, circle, $head-color, ($head-color - 100));
        .ball {
            position: relative;
            width: 47%;
            height: 47%;
            background-color: rgba(255, 255, 255, 0.85);
            margin: 0 auto;
            border-radius: 100%;
            top: 10px;
            box-shadow: inset 0px -11px 24px -2px rgba(241, 111, 92, 0.44);
         
            &:before {
                content: "";
                position: relative;
                display: block;
                width: 50%;
                height: 80%;
                background-color: rgba(255, 255, 255, 0.85);
                margin: 0 auto;
                border-radius: 100%;
                top: 10px;
                left: -100px;
            }
            &:after {
                content: "";
                position: relative;
                display: block;
                width: 50%;
                height: 80%;
                background-color: rgba(255, 255, 255, 0.85);
                margin: 0 auto;
                border-radius: 100%;
                top: -20px;
                left: 100px;
            }
        }
  }
 
  .face {
    position: relative;
    bottom: 40%;
    margin: 0 auto;
    width: 50%;
    height: 50%;
    background-color: $face-color;
    border-radius: 50% 50% 41% 41%;
    box-shadow: inset 1px -6px 22px -7px rgba(0, 0, 0, .74),
            inset 0px 7px 24px -7px rgba(207, 139, 53, 0.5),
            inset 0px -28px 24px -7px rgba(207, 139, 53, 0.5);
    border-top: 2px solid #7A121A;
  }
  .eyes {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    padding: 10% 33% 0  33%;
     
    > div {
        display: block;
        height: 25px;
        width: 10px;
        background-color: $eyes-color;
        border-radius: 20px;
        &:before {
            content:"";
            display: block;
            position: relative;
            left: 2px;
            top: 2px;
            height: 10px;
            width: 6px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 20px;
        }
     
        &.left {
            float: left;          
        }
        &.right {
            float: right;
        }
      }
    }  
}

.tube, .top-tube {
    position: absolute;
    bottom: 95px;
    right:7%;
    width:150px;
    height:200px;
    display:block;
    background: #1B991B;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1B991B), color-stop(17%, rgba(149, 233, 149, 0.82)), color-stop(28%,#52b152), color-stop(49%,#008a00), color-stop(74%,#005700));
    background: -webkit-linear-gradient(left,  #1B991B 0%, rgba(149, 233, 149, 0.82) 17%,#52b152 28%,#008a00 49%,#005700 74%);
    background: linear-gradient(to right,  #1B991B 0%, rgba(149, 233, 149, 0.82) 17%,#52b152 28%,#008a00 49%,#005700 74%);
}

.tube {
    box-shadow:inset 0px 3px 1px 0px #165816, inset 0px -36px 54px 6px rgba(32, 83, 32, 0.27);
}

.top-tube {
    width: 180px;
    height: 50px;
    top: -50px;
    margin-right: -25px;
    border-radius: 3px;
    box-shadow: inset 0 4px 2px -2px rgba(39, 165, 39, 0.46),
        inset 0 3px 2px 1px rgba(12, 85, 12, .74),
        inset 0 1px 2px 1px rgba(39, 165, 39, 0.74);
 
}


.floor {
    position:absolute;
    bottom: 0;
    border-radius: 3px;
    border: 1px solid #7E5E2E;
    background-color: #9E7537 ;
background-image: linear-gradient(45deg, #916B33 25%, transparent 25%, transparent 75%, #916B33 75%, #916B33),
    linear-gradient(45deg, #916B33 25%, transparent 25%, transparent 75%, #916B33 75%, #916B33);
background-size:70px 70px;
background-position: 0 0, 35px 35px;
 
    width:100%;
    height: 80px;
    box-shadow: inset 0 2px 1px 2px #C09149,
    inset 0 -31px 27px 5px rgba(109, 82, 42, 0.32);
    z-index:1;
 
    &:before {
        content:"";
        width:100%;
        height: 15px;
        position: relative;
        top: -15px;
        left:-1px;
        display: block;
        border-radius: 3px;
        border: 1px solid #7E5E2E;
        background-color: #9C773D;
        box-shadow: inset 0 4px 1px 2px #C09149;
    }
}

/* Animations */

@mixin animation-name($name) {
  -webkit-animation-name: $name;
  -moz-animation-name: $name;
  -ms-animation-name: $name;
  animation-name: $name;
}

@mixin animation-duration($name) {
  -webkit-animation-duration: $name;
  -moz-animation-duration: $name;
  -ms-animation-duration: $name;
  animation-duration: $name;
}

@mixin animation-timing-function($name) {
  -webkit-animation-timing-function: $name;
  -moz-animation-timing-function: $name;
  -ms-animation-timing-function: $name;
  animation-timing-function: $name;
}

@mixin animation-iteration-count($name) {
  -webkit-animation-iteration-count: $name;
  -moz-animation-iteration-count: $name;
  -ms-animation-iteration-count: $name;
  animation-iteration-count: $name;
}

@mixin animation-direction($name) {
  -webkit-animation-direction: $name;
  -moz-animation-direction: $name;
  -ms-animation-direction: $name;
  animation-direction: $name;
}

@mixin animation-delay($name) {
  -webkit-animation-delay: $name;
  -moz-animation-delay: $name;
  -ms-animation-delay: $name;
  animation-delay: $name;
}

@mixin animation-play-state($name) {
  -webkit-animation-play-state: $name;
  -moz-animation-play-state: $name;
  -ms-animation-play-state: $name;
  animation-play-state: $name;
}

@mixin animation-fill-mode($name) {
  -webkit-animation-fill-mode: $name;
  -moz-animation-fill-mode: $name;
  -ms-animation-fill-mode: $name;
  animation-fill-mode: $name;
}

@mixin keyframes($name) {
  @-webkit-keyframes $name { @content; }
  @-moz-keyframes $name { @content; }
  @-ms-keyframes $name { @content; }
  @keyframes $name { @content; }
}

@include keyframes (walk) {
  from {
    left:0%;
  }
  to {
    left:100%;
    margin-left: -436px;
  }
}


.walking {
    @include animation-direction(alternate);
    @include animation-fill-mode(forwards);
    @include animation-name(walk);
    @include animation-duration(3s);
    @include animation-timing-function (linear);
    @include animation-iteration-count (infinite);
}
---------------------------------------