<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.