my links are SCREAMING FOR HELP and SHIMMYING
This is #2 in my UNHINGED THEME series.
#1 was My Links are SPINNING
And NOW, we have SCREAMING LINKS. Please help them. They are stuck in the browser and they HATE IT.
UPDATE: THEY SHIMMY TOO
Update 2026-01-03: Fixed the screaming text being invisible on chromium browsers.
It works best with a list of links, so HERE:
main {
--link-color: black;
}
main:has(a:hover) a:not(:hover){
animation: link_disappear 50s infinite,
shimmy_left 5s infinite;
position: relative;
}
main:has(a:hover) a:not(:hover)::before {
content: "LET ME OUT";
display:inline-block;
position: absolute;
bottom: 0;
left: 0;
animation: link_appear 50s infinite;
color: transparent;
text-wrap: nowrap;
}
main:has(a:hover) ul li:nth-child(2n) a:not(:hover)::before,
main:has(a:hover) p:nth-child(2n) a:not(:hover)::before
{
content: "AHHHHH!";
}
main:has(a:hover) li:nth-child(2n-1) a:not(:hover) {
animation-delay: 0.1s;
}
main:has(a:hover) li:nth-child(2n) a:not(:hover) {
animation-delay: 0.2s;
}
main:has(a:hover) li:nth-child(3n) a:not(:hover) {
animation-delay: 0.3s;
}
main:has(a:hover) li:nth-child(4n) a:not(:hover) {
animation-delay: 0.4s;
}
main:has(a:hover) li:nth-child(5n) a:not(:hover) {
animation-delay: 0.5s;
}
@keyframes link_disappear {
0% {
color:inherit;
}
5% {
color: transparent;
}
100% {
color: transparent;
}
}
@keyframes link_appear {
0% {
color:transparent;
}
3% {
color: transparent;
}
10% {
color: var(--link-color);
}
100% {
color: var(--link-color);
}
}
@keyframes shimmy_left {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-20px);
}
75% {
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}