home > notebook > F2U >

rules

• you are allowed to edit, modify, and use these codes to your hearts content.
• credit is not mandatory at all!!! you can always link back to my site as a thank you though

rainbow on hover

i've been thinking about this theme i used to have on tumblr when i was in my teens and it had an option for the links to display the colors of the rainbow on hover. when i check the source code for the rainbow links it turns out that it was some very old JavaScript code doing the changes which makes sense. the tumblr theme released around feb 2015 and CSS animations became widely available around september 2015.

and so i made my own version using CSS animations and this is the result!

instructions

1. copy-paste either code snippet on a CSS file (or internal style, fuck it bro it's your life)
code snippet for lighter rainbow
.rainbow:hover { letter-spacing: 0px; filter: none; animation-name: rainbow; animation-duration: 1.8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes rainbow { 0% { color: #d593ff; } 20% { color: #00c3fe; } 40% { color: #8ef77b; } 60% { color: #f9d56a; } 80% { color: #fea17f; } 100% { color: #ff76b1; } }
code snippet for darker rainbow
.rainbowDark:hover { letter-spacing: 0px; filter: none; animation-name: rainbowLinkD; animation-duration: 1.8s; animation-iteration-count: infinite; animation-fill-mode: none; animation-timing-function: ease-in-out; } @keyframes rainbowLinkD { 0% { color: #9669b1; } 20% { color: #3794b0; } 40% { color: #49a739; } 60% { color: #a88726; } 80% { color: #c6651c; } 100% { color: #ac2d38; } }
2. apply the class name to whatever element you want the rainbow effect on hover. TIP: for links you can just do a:hover instead of .[CLASSNAME]:hover for the CSS selector