Mouse in the House by

Ivan Bogachev

On: 21 Jun 2016

Personal site: http://codepen.io/sfi0zy/

fullscreen 
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="floor"></div>
<div class="mouse-wrapper">
    <div class="cheese-wrapper">
        <div class="cheese">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="mouse">
        <div class="body">
            <div class="hand left"></div>
            <div class="hand right"></div>
            <div class="leg left"></div>
            <div class="leg right"></div>
        </div>
        <div class="head">
            <div class="ear left"></div>
            <div class="ear right"></div>
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="mustache">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="nose"></div>
        </div>
    </div>
</div>

@-webkit-keyframes move1 {
  0% {
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(25deg);
            transform: translateX(-30%) translateY(-50%) rotate(25deg);
  }
  50% {
    -webkit-transform: translateX(-70%) translateY(-50%) rotate(-25deg);
            transform: translateX(-70%) translateY(-50%) rotate(-25deg);
  }
  100% {
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(25deg);
            transform: translateX(-30%) translateY(-50%) rotate(25deg);
  }
}
@keyframes move1 {
  0% {
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(25deg);
            transform: translateX(-30%) translateY(-50%) rotate(25deg);
  }
  50% {
    -webkit-transform: translateX(-70%) translateY(-50%) rotate(-25deg);
            transform: translateX(-70%) translateY(-50%) rotate(-25deg);
  }
  100% {
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(25deg);
            transform: translateX(-30%) translateY(-50%) rotate(25deg);
  }
}
@-webkit-keyframes move2-1 {
  0% {
    -webkit-transform: rotate(-25deg) translateY(80%);
            transform: rotate(-25deg) translateY(80%);
  }
  50% {
    -webkit-transform: rotate(25deg) translateY(0);
            transform: rotate(25deg) translateY(0);
  }
  100% {
    -webkit-transform: rotate(-25deg) translateY(80%);
            transform: rotate(-25deg) translateY(80%);
  }
}
@keyframes move2-1 {
  0% {
    -webkit-transform: rotate(-25deg) translateY(80%);
            transform: rotate(-25deg) translateY(80%);
  }
  50% {
    -webkit-transform: rotate(25deg) translateY(0);
            transform: rotate(25deg) translateY(0);
  }
  100% {
    -webkit-transform: rotate(-25deg) translateY(80%);
            transform: rotate(-25deg) translateY(80%);
  }
}
@-webkit-keyframes move2-2 {
  0% {
    -webkit-transform: rotate(25deg) translateY(80%);
            transform: rotate(25deg) translateY(80%);
  }
  50% {
    -webkit-transform: rotate(-25deg) translateY(0);
            transform: rotate(-25deg) translateY(0);
  }
  100% {
    -webkit-transform: rotate(25deg) translateY(80%);
            transform: rotate(25deg) translateY(80%);
  }
}
@keyframes move2-2 {
  0% {
    -webkit-transform: rotate(25deg) translateY(80%);
            transform: rotate(25deg) translateY(80%);
  }
  50% {
    -webkit-transform: rotate(-25deg) translateY(0);
            transform: rotate(-25deg) translateY(0);
  }
  100% {
    -webkit-transform: rotate(25deg) translateY(80%);
            transform: rotate(25deg) translateY(80%);
  }
}
@-webkit-keyframes move3 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes move3 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: inherit;
}
*:before,
*:after {
  content: "";
}
body {
  background: #7FCC6A;
  height: 100%;
  width: 100%;
}
.box {
  position: absolute;
}
.box:nth-of-type(1) {
  background: #6fc557;
  height: 95vh;
  width: 60vw;
  left: 0;
  bottom: 0;
}
.box:nth-of-type(2) {
  background: #5ebf44;
  height: 90vh;
  width: 70vw;
  left: 5vw;
  bottom: 0;
}
.box:nth-of-type(3) {
  background: #4b9b35;
  height: 80vh;
  width: 30vw;
  left: 10vw;
  bottom: 0;
}
.box:nth-of-type(4) {
  background: #54ae3c;
  height: 75vh;
  width: 55vw;
  left: 45vw;
  bottom: 0;
}
.box:nth-of-type(5) {
  background: #4b9b35;
  height: 60vh;
  width: 40vw;
  left: 50vw;
  bottom: 0;
}
.floor {
  background: #42882f;
  width: 100%;
  height: 25vh;
  bottom: 0;
  left: 0;
  position: absolute;
}
.mouse-wrapper {
  position: absolute;
  top: 50vh;
  left: 50%;
  width: 50vh;
  height: 50vh;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-animation: 6s move1 infinite;
          animation: 6s move1 infinite;
}
.mouse-wrapper .cheese-wrapper {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.mouse-wrapper .cheese-wrapper .cheese {
  height: inherit;
  width: inherit;
  background-image: -webkit-linear-gradient(90deg, #FFDC00 50%, transparent 50%);
  background-image: linear-gradient(0deg, #FFDC00 50%, transparent 50%);
}
.mouse-wrapper .cheese-wrapper .cheese div {
  background: #e6c600;
  border-radius: 50%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(1) {
  height: 30%;
  width: 30%;
  top: 80%;
  left: 10%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(2) {
  height: 20%;
  width: 20%;
  top: 70%;
  left: 75%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(3) {
  height: 15%;
  width: 15%;
  top: 60%;
  left: 30%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(4) {
  height: 10%;
  width: 10%;
  top: 50%;
  left: 60%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(5) {
  height: 6%;
  width: 6%;
  top: 55%;
  left: 10%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(6) {
  height: 8%;
  width: 8%;
  top: 75%;
  left: 10%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(7) {
  height: 5%;
  width: 5%;
  top: 90%;
  left: 50%;
}
.mouse-wrapper .cheese-wrapper .cheese div:nth-of-type(8) {
  height: 3%;
  width: 3%;
  top: 55%;
  left: 90%;
}
.mouse-wrapper .mouse {
  height: inherit;
  width: inherit;
}
.mouse-wrapper .mouse .body {
  background: #fafafa;
  height: 30%;
  width: 30%;
  border-radius: 50%;
  left: 50%;
  top: 40%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.mouse-wrapper .mouse .body .hand {
  background: inherit;
  width: 50%;
  height: 10%;
  bottom: 50%;
  border-radius: 30%;
}
.mouse-wrapper .mouse .body .hand.left {
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
  left: -30%;
  -webkit-animation: 3s move2-1 infinite;
          animation: 3s move2-1 infinite;
}
.mouse-wrapper .mouse .body .hand.right {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  right: -30%;
  -webkit-animation: 3s move2-2 infinite;
          animation: 3s move2-2 infinite;
}
.mouse-wrapper .mouse .body .leg {
  background: inherit;
  width: 50%;
  height: 10%;
  bottom: 0;
  border-radius: 30%;
}
.mouse-wrapper .mouse .body .leg.left {
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  left: 0;
}
.mouse-wrapper .mouse .body .leg.right {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  right: 0;
}
.mouse-wrapper .mouse .head {
  background: #FFFFFF;
  height: 20%;
  width: 20%;
  top: 10%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mouse-wrapper .mouse .head:after {
  background: transparent;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -26%;
  border-style: solid;
  border-width: 7.14285714vh 5vh 0 5vh;
  border-color: #FFFFFF transparent transparent transparent;
}
.mouse-wrapper .mouse .head .ear {
  background: inherit;
  height: 50%;
  width: 50%;
  border-radius: inherit;
  top: -15%;
}
.mouse-wrapper .mouse .head .ear.left {
  left: -15%;
}
.mouse-wrapper .mouse .head .ear.right {
  right: -15%;
}
.mouse-wrapper .mouse .head .eye {
  background: #0095D6;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  top: 30%;
  -webkit-animation: 3s move3 infinite;
          animation: 3s move3 infinite;
  z-index: 1;
}
.mouse-wrapper .mouse .head .eye.left {
  left: 12%;
}
.mouse-wrapper .mouse .head .eye.right {
  right: 12%;
}
.mouse-wrapper .mouse .head .eye:after {
  background: #443B37;
  height: 70%;
  width: 50%;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.mouse-wrapper .mouse .head .mustache {
  height: 30%;
  width: 130%;
  bottom: -20%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mouse-wrapper .mouse .head .mustache div {
  background: #443B37;
  width: 50%;
  height: 1px;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(1),
.mouse-wrapper .mouse .head .mustache div:nth-of-type(4) {
  top: 10%;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(2),
.mouse-wrapper .mouse .head .mustache div:nth-of-type(5) {
  top: 50%;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(3),
.mouse-wrapper .mouse .head .mustache div:nth-of-type(6) {
  top: 90%;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(1) {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(1) {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(2) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(3) {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(4) {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  left: 50%;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(5) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  left: 50%;
}
.mouse-wrapper .mouse .head .mustache div:nth-of-type(6) {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  left: 50%;
}
.mouse-wrapper .mouse .head .nose {
  background: #443B37;
  height: 15%;
  width: 15%;
  border-radius: 50%;
  left: 50%;
  bottom: -30%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}

87