A Pen by Klayton Faria.

index.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>

Mushroom-animation.markdown

Mushroom animation

Mushroom and scene like Mario w/ css and html, WITHOUT any images!

;)

A Pen by Klayton Faria on CodePen.

License.

style.scss

@import "compass";
$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);
}