Blinking Text With Rainbow Colour
<!DOCTYPE html>
<html>
<head>
<style>
.blinking {
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) );
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) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
animation: mymove 2s infinite alternate;
font-size:50px;
}
@-webkit-keyframes mymove {
from {opacity:0;color:pink;}
to {opacity: 1;}
}
</style>
</head>
<body>
<p class="blinking">Researching...</p>
</body>
</html>
Leave a Reply