ReedyBear's Blog

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);  
    }  

}  

Unhinged Theme Posts

#code #unhinged-theme