<div class="crushed-1">1 Hover me </div>
<div class="crushed-2">2 Hover me </div>
<div class="crushed-3">3 Hover me </div>
<div class="crushed-4">4 Hover me </div>
<div class="crushed-5">5 Hover me </div>
<div class="crushed-6">6 Hover me </div>
<div class="crushed-7">7 Hover me </div>
div.crushed-1 {
--w:10ch;
--x:0;
letter-spacing: calc(10*var(--w));
width: var(--w);
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) - var(--x)*5ch) 0 0,
calc(-60*var(--w) - var(--x)*6ch) 0 0,
calc(-70*var(--w) - var(--x)*7ch) 0 0,
calc(-80*var(--w) - var(--x)*8ch) 0 0,
calc(-90*var(--w) - var(--x)*9ch) 0 0;
background:linear-gradient(currentColor 0 0) right/0% 100% no-repeat;
transition: 0.5s;
}
.crushed-1:hover {
--x:1;
background-size:calc(var(--w) - 1ch) 100%;
}
div.crushed-2 {
padding-bottom: 8px;
--w:10ch;
--x:0;
letter-spacing: calc(10*var(--w));
width: var(--w);
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) - var(--x)*5ch) 0 0,
calc(-60*var(--w) - var(--x)*6ch) 0 0,
calc(-70*var(--w) - var(--x)*7ch) 0 0,
calc(-80*var(--w) - var(--x)*8ch) 0 0,
calc(-90*var(--w) - var(--x)*9ch) 0 0;
background:linear-gradient(currentColor 0 0) bottom/100% 3px no-repeat;
transition: 0.3s,background-position 0.3s 0.3s;
}
div.crushed-2:hover {
--x:1;
background-position: left;
background-size:1ch 3px;
transition: 0.3s,background-size 0.3s 0.3s,text-shadow 0.3s 0.3s;
}
div.crushed-3 {
--w:10ch;
--x:0;
line-height: 1.4em;
letter-spacing: var(--w);
width: var(--w);
text-shadow:
calc(-1*var(--w)) 0 0,
calc(-2*var(--w)) 0 0,
calc(-3*var(--w)) 0 0,
calc(-4*var(--w)) 0 0,
calc(-5*var(--w)) 0 0,
calc(-6*var(--w)) 0 0,
calc(-7*var(--w)) 0 0,
calc(-8*var(--w)) var(--x,0) 0,
calc(-9*var(--w)) var(--x,0) 0;
background:linear-gradient(currentColor 0 0) top right/2.5ch 0% no-repeat;
transition: 0s .6s linear,background-size .3s linear;
}
.crushed-3:hover {
--x:1em;
background-size:2.5ch 100%;
transition: .5s linear,text-shadow .3s .2s linear;
}
div.crushed-4 {
--w:10ch;
--x:0;
letter-spacing: calc(10*var(--w));
width: var(--w);
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) + var(--x)*4ch) 0 0,
calc(-60*var(--w) + var(--x)*3ch) 0 0,
calc(-70*var(--w) + var(--x)*2ch) 0 0,
calc(-80*var(--w) + var(--x)*1ch) 0 0,
calc(-90*var(--w) + var(--x)*0ch) 0 0;
background:linear-gradient(currentColor 0 0) center/0 100px no-repeat;
transition: 0.5s;
}
div.crushed-4:hover {
--x:1;
background-size:calc(var(--w) - 2ch) 100%;
}
div.crushed-5 {
--w:10ch;
--x:0;
letter-spacing: calc(10*var(--w));
width: var(--w);
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) - var(--x)*5ch) 0 0,
calc(-60*var(--w) - var(--x)*6ch) 0 0,
calc(-70*var(--w) - var(--x)*7ch) 0 0,
calc(-80*var(--w) - var(--x)*8ch) 0 0,
calc(-90*var(--w) - var(--x)*9ch) 0 0;
background:linear-gradient(currentColor 0 0) left/0% 3px no-repeat;
-webkit-mask:linear-gradient(#000 0 0) left/100% 100% no-repeat;
transition: 0.3s,background-size 0.3s 0.3s;
}
div.crushed-5:hover {
--x:1;
background-size:100% 3px;
-webkit-mask-size:1ch 100%;
transition: 0.3s 0.3s,background-size 0.3s;
}
div.crushed-6 {
--w:10ch;
--x:0;
--y:-0.6em;
line-height: 1.2em;
letter-spacing: calc(10*var(--w));
width: var(--w);
padding:0 8px;
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) - var(--x)*5ch) 0 0,
calc(-60*var(--w) - var(--x)*6ch) 0 0,
calc(-70*var(--w) - var(--x)*7ch) 0 0,
calc(-80*var(--w) - var(--x)*8ch) 0 0,
calc(-90*var(--w) - var(--x)*9ch) 0 0;
background:
linear-gradient(currentColor 0 0) bottom var(--y) left 0 /3px 0.6em,
linear-gradient(currentColor 0 0) bottom var(--y) right 0 /var(--d,3px) 0.6em,
linear-gradient(currentColor 0 0) bottom var(--y) left 0 /100% 3px;
background-repeat: no-repeat;
-webkit-mask:linear-gradient(#000 0 0) left/100% 100% no-repeat;
transition: 0.3s,background-position 0.3s 0.3s;
}
div.crushed-6:hover {
--y:0;
--x:1;
--d:calc(100% - 1ch + 3px - 16px);
-webkit-mask-size:calc(1ch + 16px) 100%;
transition: 0.3s 0.3s,background-position 0.3s;
}
div.crushed-7 {
--w:10ch;
--x:0;
--yy:calc(-1ch - 16px);
letter-spacing: calc(10*var(--w));
width: var(--w);
padding:8px;
text-shadow:
calc(-10*var(--w) - var(--x)*1ch) 0 0,
calc(-20*var(--w) - var(--x)*2ch) 0 0,
calc(-30*var(--w) - var(--x)*3ch) 0 0,
calc(-40*var(--w) - var(--x)*4ch) 0 0,
calc(-50*var(--w) - var(--x)*5ch) 0 0,
calc(-60*var(--w) - var(--x)*6ch) 0 0,
calc(-70*var(--w) - var(--x)*7ch) 0 0,
calc(-80*var(--w) - var(--x)*8ch) 0 0,
calc(-90*var(--w) - var(--x)*9ch) 0 0;
background:
linear-gradient(currentColor 0 0) top 0 right var(--yy) /calc(1ch + 16px) 3px,
linear-gradient(currentColor 0 0) bottom 0 right var(--yy) /3px 100%,
linear-gradient(currentColor 0 0) bottom 0 right var(--yy) /calc(1ch + 16px) 3px,
linear-gradient(currentColor 0 0) bottom 0 left 0 /3px var(--d,0%);
background-repeat: no-repeat;
transition: .3s .3s ,background-size .3s;
}
div.crushed-7:hover {
--yy:calc(var(--w) - 1ch);
--x:1;
--d:100%;
transition: .3s,background-size .3s .3s;
}
/**/
[class] {
display:inline-block;
font-size:40px;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
margin:25px;
cursor:pointer;
}
div[class]:nth-child(odd) {
color:darkblue;
}
body {
text-align:center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.