<body>
  <div class="box-canvas">
    <div class="toast">
      <div class="toast-top"></div>
      <div class="toast-inner"></div>
      </div>
    <div class="toaster-feet"></div>
    <div class="toaster">
    </div>
  </div>
</body>
:root {
  --background-color: #7CC6F4;
  --toaster-color: #FC9FAD;
  --handle-color: #F74C66;
  --toast-center-color: #CA7D25;
  --toast-outer-color: #E3D2AD;
}

body{
  background: var(--background-color);
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 600px;
  height:600px;
  background: var(--background-color);
}

.toaster {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background: var(--toaster-color);
  border-radius: 25% 25% 10% 10%;
  box-shadow: inset 0 0 30px var(--handle-color);
}

@keyframes handlePop {
   0% {
    bottom: 20px;
  }
  
  10% {
    bottom: 30px;
 }
  
  70% {
     bottom: 30px;
  }
  
  75% {
     bottom: 20px;
  }
}


/* Handle */
.toaster::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: 20px;
  width: 30px;
  height: 10px;
  background: var(--handle-color);
  border-radius: 0 30% 30% 0;
  animation: handlePop 3s infinite;
}

@keyframes toastPop {
  0% {
    top: 150px;
  }
  
  10% {
    top: 20px;
 }
  
  12% {
    top: 100px;
  }
  
  70% {
     top: 100px;
  }
  
  75% {
    top: 150px;
  }
}


.toast {
  position: absolute;
  left: 190px;
  top: 150px;
  width: 200px;
  height: 300px;
  animation: toastPop 3s infinite;
}

.toast::after {
  content: '';
  position: absolute;
  left: 100px;
  top: 145px;
  width: 0px;
  height: 0px;
  background: rgba(202, 125, 37, 0.6);
  box-shadow: 0 0 45px 75px var(--toast-center-color);
}

.toast-inner {
  position: absolute;
  width: 198px;
  height: 180px;
  background: var(--toast-outer-color);
  top: 50px;
  left: 1px;
  border: 5px solid var(--toast-center-color);
  border-top: none;
}

.toast-top {
  position: absolute;
  width: 102px;
  height: 100px;
  border-radius: 50%;
  background: var(--toast-outer-color);
  border: 5px solid var(--toast-center-color);
  border-top: 8px solid var(--toast-center-color);
  border-right: none;
}

.toast-top::after {
  content: '';
  position: absolute;
  right: -103px;
  top: -5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--toast-outer-color);
  border: 5px solid var(--toast-center-color);
  border-top: 8px solid var(--toast-center-color);
  border-left: none;
}

/* Left foot */
.toaster-feet {
  position: absolute;
  top: 400px;
  left: 175px;
  background: var(--handle-color);
  width: 25px;
  height: 10px;
  border-radius: 0 0 50% 50%;
}

/* Right foot */
.toaster-feet::before {
  content: '';
  position: absolute;
  left: 225px;
  background: var(--handle-color);
  width: 25px;
  height: 10px;
  border-radius: 0 0 50% 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.