Nik123,
вариант не для ie
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.rainbow {
font-size: 24px;
position: relative;
}
.rainbow:hover:after {
position: absolute;
width: 100%;
height: 100%;
left: 0px; top: 0px;
z-index: -44;
content: "";
background-color: #333333;
border-radius: 8px;
}
.rainbow:hover{
font-weight: bold;
animation: spin 80s infinite;
padding: 4px 8px;
cursor: default;
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes spin {
50% {
background-position: 5000px 0%;
}
}
</style>
</head>
<body>
<a class="rainbow">Rainbows are colorful and scalable and lovely</a>
</body>
</html>