Boop in a Box

FEATURED

In this example below you will see how to do a Boop in a Box with some HTML / CSS and Javascript

A short animation featuring a cat named Boop and a cardboard box.Boop is a character from my Travels with Robot animated GIF series. http://bit.ly/travelswithrobot for more.

Thumbnail
This awesome code was written by Jennifer Perdomo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jennifer Perdomo ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="boop">
    <div class="head">
      <div class="ears left-ear"></div>
      <div class="ears right-ear"></div>
      <div class="head-clone"></div>
      <div class="eyes"></div>
    </div>
    <div class="body"></div>
  </div>
  <div class="box"></div>
</div>

/*Downloaded from https://www.codeseek.co/oldstandstudio/boop-in-a-box-odVxdV */
    :root {
  --lilac: #B6A4B2;
  --black: #3A3335;
  --pink: #FFC0A9;
  --brown: #D2CCA1;
  --white: #FFFFFC;
  --darker-white: #F3F3F3;
}

body {
  background-color: var(--white);
  margin: 0 auto;
  padding: 0;
}

:before, :after {
  content: '';
  position: absolute;
}

.container {
  background-color: var(--lilac);
/*   border-radius: 5px; */
  height: 600px; width: 800px;
  margin: 20px auto;
  position: relative;
}

.container .boop {
  animation: bop 2s ease-in-out forwards 2s;
  height: 25%; width: 10%;
  left: 45%; bottom: 46%;
  position: absolute;
}

@keyframes bop {
  0%,5% { transform:translatey(-2%) }
  10%,100% { transform: translatey(0%) }
  25%,75% { transform: translatey(55%) }
  97% { transform: translatey(57%) }
}

.container .boop .head {
  background-color: var(--white);
  border-radius: 50%;
  box-shadow: 0px 3px 0px -1px var(--darker-white);
  height: 55%; width: 100%;
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
}

.container .boop .head:after {
  background-color: var(--darker-white);
  border-radius: 50%;
  height: 5%; width: 10%;
  bottom: 35%; left: 45%;
}

.container .boop .head .ears {
  border-top: 40px solid transparent;
  border-bottom: 20px solid transparent;
  height: 0; width: 0;
  position: absolute; top: -10%;
}

.container .boop .head .ears.left-ear {
  border-right: 40px solid var(--darker-white);
  border-left: none;
  left: -15%;
  transform-origin: right;
  transform: rotate(58deg);
}

.container .boop .head .ears.right-ear {
  border-left: 40px solid var(--darker-white);
  border-right: none;
  right: -15%;
  transform-origin: left;
  transform: rotate(-57deg);
}

.container .boop .head .head-clone {
  background-color: var(--white);
  border-radius: 50%;
  height: 100%; width: 100%;
  position: absolute;
  top: 0; left: 0;
}

.container .boop .head .eyes {
  background-color: var(--black);
  border-radius: 50%;
  box-shadow: 20px 0px 0px 0px var(--black);
  height: 20%; width: 10%;
  position: absolute;
  top: 40%; left: 32%;
}

.container .boop .body {
  background-color: var(--white);
  border-radius: 50px;
  height: 50%; width: 90%;
  position: absolute;
  bottom: 0; left: 5%;
}

.container .box {
  animation:
    shake 1.1s ease-in-out forwards 2s,
    shake 1.6s ease-in-out forwards 3.85s;
  background-color: var(--brown);
  height: 25%; width: 20%;
  left: 40%; bottom: 30%;
  position: absolute;
  transform-origin: bottom center;
}

@keyframes shake {
  0%,20%,40%,60%,80%,100% { transform: rotate(0deg) }
  10%,50%,90% { transform: rotate(.5deg) }
  30%,70% { transform: rotate(-.5deg) }
}

.container .box:before,
.container .box:after {
  background-color: var(--brown);
  height: 45%; width: 3%;
  top: 0;
  transform-origin: top;
}

.container .box:before {
  animation: 
    shakeshakeshake 1s ease-in-out forwards 2.1s,
    shakeshakeshake 1.5s ease-in-out forwards 3.9s;
  left: -2%;
  transform: rotate(10deg);
}

@keyframes shakeshakeshake {
  0%,20%,40%,60%,80%,100% { transform: rotate(10deg) }
  10%,50%,90% { transform: rotate(5deg) }
  30%,70% { transform: rotate(13deg) }
}

.container .box:after {
  animation: 
    shakeshakeshake2 1s ease-in-out forwards 2.15s,
    shakeshakeshake2 1.5s ease-in-out forwards 3.95s;
  right: -2%;
  transform: rotate(-10deg);
}

@keyframes shakeshakeshake2 {
  0%,20%,40%,60%,80%,100% { transform: rotate(-10deg) }
  10%,50%,90% { transform: rotate(-7deg) }
  30%,70% { transform: rotate(-13deg) }
}

@media (max-width: 800px) {
  .container {
    height: 300px; width: 400px;
  }
  .container .boop .head .eyes {
    box-shadow: 15px 0px 0px 0px var(--black);
  }
  .container .boop .head:after {
    left: 50%;
  }
  .container .boop .head .ears {
    border-top: 30px solid transparent;
    border-bottom: 10px solid transparent;
    top: -8%;
  }
  .container .boop .head .ears.left-ear {
    border-right: 30px solid var(--darker-white);
    left: -23%;
    transform: rotate(55deg);
  }

  .container .boop .head .ears.right-ear {
    border-left: 30px solid var(--darker-white);
    right: -23%;
    transform: rotate(-55deg);
  }
}

@media (max-width: 400px) {
  .container {
    height: 200px; width: 300px;
  }
  .container .boop .head .eyes {
    box-shadow: 10px 0px 0px 0px var(--black);
  }
  .container .boop .head:after {
    left: 50%;
  }
  .container .boop .head .ears {
    border-top: 20px solid transparent;
    border-bottom: 5px solid transparent;
    top: -2%;
  }
  .container .boop .head .ears.left-ear {
    border-right: 25px solid var(--darker-white);
    left: -20%;
    transform: rotate(50deg);
  }

  .container .boop .head .ears.right-ear {
    border-left: 25px solid var(--darker-white);
    right: -20%;
    transform: rotate(-50deg);
  }
}


/*Downloaded from https://www.codeseek.co/oldstandstudio/boop-in-a-box-odVxdV */
    

Comments