<div class="arcade-3">1. Hover me </div>
<div class="arcade-3" style="font-size:40px">2. Hover me </div>
<div class="arcade-3" style="font-size:50px">3. Hover me </div>
@property --m{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --mm{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --mmm{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

 @property --cn{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

div.arcade-3 {
  --w:11ch;
  font-family: monospace;
  overflow: hidden;
  letter-spacing: var(--w);
  width: var(--w);
  line-height: 1.2em;
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) 0 0,
    calc(-2*var(--w)) 0 0,

    calc(-3*var(--w)) var(--mmm) 0, /* H */
    calc(-4*var(--w)) var(--mmm) 0, /* O */
    calc(-5*var(--w)) var(--mmm) 0, /* V */
    calc(-6*var(--w)) var(--mmm) 0, /* E*/
    calc(-7*var(--w)) var(--mmm) 0, /* R */
    calc(-8*var(--w))  0,
    calc(-9*var(--w)) 0 0,
    calc(-10*var(--w)) 0 0;
   padding:60px 8px 60px;
   color:#fff;
  --m:-30px;
  --mm:60px;
  --mmm:0px;
  --cn:60px;
  -webkit-mask:linear-gradient(0deg,#000 calc(80px + 1.2em),#0000);
  background:
   linear-gradient(#000 0 0) top 60px left  0/3ch 1.2em,
   linear-gradient(#000 0 0) top 60px right 0/3ch 1.2em,
   linear-gradient(#000 0 0) top var(--mm,60px) left 50%/calc(100% - 6ch + 2px) 1.2em,
  /*Mario*/
    linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000) bottom calc(26px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0) bottom calc(24px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0) bottom calc(22px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0) bottom calc(20px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0) bottom calc(18px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0) bottom calc(16px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0) bottom calc(14px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0) bottom calc(12px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0) bottom calc(10px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px, #643700 0) bottom calc(8px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0) bottom calc(6px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0) bottom calc(4px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0) bottom calc(2px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0 ) bottom calc(0px + var(--m)) left 50%/34px 2px,
    /* Coin*/
    linear-gradient(90deg, #0000 4px,#fbb67d 0 12px,#717171 0 16px,#0000 0) bottom calc(30px + var(--cn)) left 50%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(28px + var(--cn)) left 50%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 6px,#b5582b 0 10px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(26px + var(--cn)) left 50%/20px 2px,
    linear-gradient(90deg, #fbb67d 4px,#b5582b 0 6px,#fbb67d 0 10px,#717171 0 12px,#fbb67d 0 16px,#717171 0) bottom calc(6px + var(--cn)) left 50%/20px 20px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 6px,#717171 0 10px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(4px + var(--cn)) left 50%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(2px + var(--cn)) left 50%/20px 2px,
    linear-gradient(90deg, #0000 4px,#fbb67d 0 12px,#717171 0 16px,#0000 0) bottom calc(0px + var(--cn)) left 50%/20px 2px;

    background-repeat: no-repeat;
 }


 div.arcade-3:hover {
   --m:-29.5px;
   --mm:59.8px;
   --mmm:-0.2px;
   --cn:calc(120px + 1.2em);
   transition:--m 1s 0.2s cubic-bezier(1,160,0.5,160),--mm 0.4s .9s cubic-bezier(1,100,0.5,100),--mmm 0.4s .9s cubic-bezier(1,100,0.5,100),--cn .7s .9s; 
 }
 
 /**/
[class] {
  display:inline-block;
  font-size:30px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.