<div class="loud"></div>

body {
  margin:0;
  height:100vh;
  display:grid;
  background:#039ebd;
}
.loud {
  width:250px;
  height:200px;
  margin:auto auto 40px 0;
  transform: rotate(-15deg);
  filter: drop-shadow(1px 2px 2px black);
  transform-origin:0 100%;
  position:relative;
  --c:#f6c79d;
  --c1:#4d4d4d;
  --c2:#e85d40;
  background: 
    linear-gradient(#e4eade 0 0) 21.5% 39.5%/5% 15%,
    linear-gradient(var(--c2) 0 0) 94.5% 24%/3.5% 66%,
    radial-gradient(farthest-side,var(--c2) 98%,#0000) 94.5% 4.5%/3.5% 5%,
    radial-gradient(farthest-side,var(--c2) 98%,#0000) 94.5% 76.5%/3.5% 5%,
    linear-gradient(var(--c2) 0 0) 37% 37%/24% 29%,
    radial-gradient(100% 100% at top right,var(--c2) 98%,#0000) 26% 52%/4% 7%,
    radial-gradient(100% 100% at bottom right,var(--c2) 98%,#0000) 26% 28.5%/4% 7%,
    linear-gradient(var(--c2) 0 0) 26% 40%/3% 16%,
    radial-gradient(farthest-side at left,#e4eade 98%,#0000 ) 99% 39.5%/5% 15%,
    linear-gradient(#fff 0 0) 86% 41%/40% 5%,
    radial-gradient(110% 74% at bottom left,#0000 98%,#fff 0) 86% 82%/40% 48%,
    radial-gradient(110% 74% at top left,#0000 98%,#fff 0) 86% -16%/40% 48%,
    linear-gradient(to bottom left,var(--c) 49.5%,#0000 50%)27% 90%/6% 3%,
    linear-gradient(to top right,var(--c) 49.5%,#0000 50%)34.4% 66%/3% 9%,
    radial-gradient(100% 100% at bottom right,var(--c) 94%,#0000) 29% 67%/6% 9%,
    radial-gradient(100% 100% at top left,#0000 94%,var(--c)) 24% 71%/5% 5%,
    radial-gradient(farthest-side,var(--c) 97%,#0000) 48% 90%/6% 5.5%,
    radial-gradient(farthest-side,var(--c) 97%,#0000) 48% 84.2%/6% 5.5%,
    radial-gradient(farthest-side,var(--c) 97%,#0000) 48% 77.8%/6% 5.5%,
    radial-gradient(farthest-side,var(--c) 97%,#0000) 48% 72%/6% 5.5%,
    linear-gradient(var(--c) 0 0) 31% 86%/26% 16.5%,
    linear-gradient(var(--c) 0 0) 34% 72%/19.5% 5%,
    linear-gradient(var(--c) 0 0) 36% 90%/17% 5%,
    linear-gradient(var(--c1) 0 0) 40% 84%/15% 34%,
    radial-gradient(100% 100% at top right,var(--c1) 98%,#0000 ) 31% 59%/5% 6%,
    radial-gradient(100% 100% at top right,var(--c1) 98%,#0000 ) 39.5% 95%/4% 4.5%,
    radial-gradient(farthest-side,var(--c1) 98%,#0000 ) 50% 95%/4% 4.5%,
    linear-gradient(var(--c1) 0 0) 45% 95%/10% 4.5%,
    linear-gradient(#414141 0 0) 0 91%/21.5% 27%,
    linear-gradient(#fff 0 0) 0 88%/23.5% 21%;
  background-repeat: no-repeat;
  animation:a 3s infinite ;
}
.loud:before {
  content:"BOOOO !!!";
  position:absolute;
  left: 125%;
  white-space: nowrap;
  top: 30%;
  transform: rotate(15deg);
  padding: 15px 10px;
  font-size: 40px;
  font-family:sans-serif;
  background:#fff;
  box-shadow: 0 0 0 50px #fff;
  font-weight:bold;
  clip-path: polygon(-30px -30px,20% 0,20% -20px,40% 0,50% -30px,60% 0,80% -20px,80% 0,calc(100% + 30px) -30px,100% 25%,calc(100% + 25px) 50%,100% 75%,calc(100% + 30px) calc(100% + 30px),80% 100%,80% calc(100% + 20px),60% 100%,50% calc(100% + 30px),40% 100%,20% calc(100% + 20px),20% 100%,-30px calc(100% + 30px),0 75%,-25px 50%,0 25%);
  animation:b 3s infinite;
}

@keyframes a {
  0%,100% {transform:translate(-100%,0) rotate(-15deg)}
  50%,80% {transform:translate(0,0) rotate(-15deg)}
  55%,60%,65%,70%,75% {transform:translate(-2px,-5px) rotate(-13deg)}
  52%,57%,62%,67%,72% {transform:translate(3px,2px) rotate(-17deg)}
}
@keyframes b {
  0%,50%,100% {opacity:0}
  52%,80% {opacity:1}
}