Pure CSS 🤣!!!

index.html

<div class="head">
   <div class="face">
      <div class="eyes">
         <div class="left-eye"></div>
         <div class="right-eye"></div>
      </div>
      <div class="tear-1"></div>
      <div class="tear-2"></div>
      <div class="mouth"></div>
   </div>
</div>
<h1>ROFL!</h1>

pure-css.markdown

Pure CSS 🤣!!!

License.

style.scss

$dark-brown: rgba(100, 48, 10, 1);
$light-brown:rgb(70%, 61%, 55%);
$dark-brown-fade: rgba(100, 48, 10, 0.5);
$black-fade: rgba(0, 0, 0, 0.5);
$medium-brown:rgb(175, 105, 5);
$tears:#25B5EF;
*::before,
*::after {
  content: "";
  position: absolute;
}
*{
  padding:0;
  margin:0;
  transition:.75s ease-in-out;
}
body{
   width:100vw;
   min-width:600px;
   &:hover .head{
      transform:translatex(225px);
   }
   &:hover .face{
      transform:rotate(385deg);
   }
   &::after{
      z-index:-1;
      width:calc(100vw - 40px);
      height:300px;
      background:linear-gradient(transparent, magenta),linear-gradient(90deg, cyan, magenta);
      background-size:10px 10px;
      top:0;
      border:20px groove cyan;
   }
   &:hover::after{
      animation:color 0.5s linear infinite;
   }
   &:hover h1{
      transform:scale(1)perspective(300px)rotateY(-3600deg);
      left:10%;
   }
}
@keyframes color{
   0%{
      filter:hue-rotate(0);
   }
   50%{
      filter:hue-rotate(360deg);
   }
}
.head{
   margin:50px auto;
   position:relative;
   width:250px;
   height:250px;
   background:radial-gradient(circle at 50% 20%, white, orange 50%, $dark-brown 95%);
   border-radius:50%;
   filter:drop-shadow(0 0 3px black)drop-shadow(0 0 3px $dark-brown);
   &::before{
      z-index:1;
      width:100%;
      height:100%;
      background:radial-gradient(circle at 50% 0, white, orange, transparent 80%);
      border-radius:50%;
      top:1%;
      filter:blur(3px);
      box-shadow:inset 0 -15px 30px 2px $dark-brown;
   }
}
.face{
   z-index:2;
   position:absolute;
   width:100%;
   height:100%;
   transform:rotate(-25deg);
}
.eyes{
   filter:drop-shadow(0 0 1px brown)drop-shadow(0 0 2px $dark-brown);
   z-index:3;
}
.left-eye{
   position:absolute;
   z-index:3;
   width:60px;
   height:80px;
   background:$medium-brown;
   top:60px;
   left:50px;
   clip-path:polygon(100% 50%, 0 80%, 55% 50%, 0 20%);
}
.right-eye{
   position:absolute;
   z-index:3;
   width:60px;
   height:80px;
   background:$medium-brown;
   top:60px;
   right:50px;
   clip-path:polygon(100% 50%, 0 80%, 55% 50%, 0 20%);
   transform:rotateY(180deg);
}
.tear-1{
   position:absolute;
   z-index:3;
   width:50px;
   height:60px;
   top:45%;
   border-radius:50%;
   clip-path:polygon(50% 0, 100% 100%, 0 100%);
   transform:rotatez(55deg);
   background-size:85% 100%;
   &::before{
      z-index:4;
      width:60%;
      height:90%;
      background:linear-gradient(85deg, transparent, $tears 5%, $tears 70%, transparent 90%);
      left:12px;
      border-radius:50%;
   }
   &::after{
      z-index:4;
      width:50%;
      height:85%;
     background:linear-gradient(-85deg, transparent 30%, white 70%, transparent 95%);
      left:10px;
      border-radius:50%;
   }
}
.tear-2{
   position:absolute;
   z-index:3;
   width:50px;
   height:60px;
   top:45%;
   right:0;
   border-radius:50%;
   clip-path:polygon(50% 0, 100% 100%, 0 100%);
   transform:rotatez(-55deg);
   background-size:85% 100%;
   &::before{
      z-index:4;
      width:60%;
      height:90%;
      background:linear-gradient(85deg, transparent, $tears 5%, $tears 70%, transparent 90%);
      right:12px;
      border-radius:50%;
   }
   &::after{
      z-index:4;
      width:50%;
      height:85%;
     background:linear-gradient(85deg, transparent 30%, white 70%, transparent 95%);
      right:10px;
      border-radius:50%;
   }
}
.mouth{
   position:absolute;
   z-index:3;
   width:145px;
   height:50px;
   background:linear-gradient(white 30%, $dark-brown-fade 30%);
   bottom:50px;
   left:54px;
   clip-path:ellipse(50% 100% at 50% 0);
   box-shadow:inset 0 0 10px 5px $dark-brown;
}
h1{
   color:white;
   font-family:arial;
   font-weight:900;
   font-size:5em;
   position:absolute;
   top:100px;
   left:50%;
   transform:scale(0);
   z-index:1;
}