I have a picture and wish its background to change and repeatedly take random colours sequencially from all over the spectrum till the user's mouse exits the picture. I guess the solution should use setInterval (see this) and the following shall help:
var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
var bg = "background-color: rgb(" + red + "," + green + "," + blue + ");";
x.style = bg;
Here is a fiddle trying to implement what I have in mind: The first smiley should change colour onMouseOver and return to normal onMouseOut.
Here is what I have in mind: I want to implement what FontAwesome.com do on their logo at their footer: it changes colours onmouseover and stops otherwise. But that's not a picture, it's a font(?). Instead, I have a logo that I made transparent, and I want to change the background dynamically so that it replicates the nice trick of Fontawesome. Any ideas?
* Updated *
I am posting a detailed solution to my question below based on the answers of the community. Looks like I followed Leo's way but Rakibul's solution worked well too.
I achieved what I want.
I wanted my logo to change colours "nicely" when a user's mouse hovers over it (like magic and similar to FontAwesome's logo at their footer).
.OAlogo {
background-color: transparent;
animation-play-state: paused;
}
.OAlogo:hover {
animation: colorReplace 10s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes colorReplace {
0% {
background-color: rgb(44, 132, 231);
}
10% {
background-color: rgb(61, 192, 90);
}
20% {
background-color: rgb(255, 211, 59);
}
30% {
background-color: rgb(253, 136, 24);
}
40% {
background-color: rgb(243, 129, 174);
}
50% {
background-color: rgb(34, 138, 230);
}
60% {
background-color: rgb(62, 192, 89);
}
70% {
background-color: rgb(255, 211, 59);
}
80% {
background-color: rgb(71, 193, 86);
}
90% {
background-color: rgb(253, 126, 20);
}
100% {
background-color: rgb(233, 109, 132);
}
}
<img class="OAlogo" src="http://www.stouras.com/OperationsAcademia.github.io/images/OA-logo-solo.png" style="background: black;" width="100">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With