Color changing effect using css

Color changing effect is one of the attractive concept. This will be done by using css3, Change the colors according to your choice with seconds i given in this example 5sec interval between the two colors. This is also called as a blinker, Here is i used the code is animation: change color 5s infinite;


I hope this simple concept will help you, Here I provide the live demo and source code change the code and see the animation with different colors.
.


color changing effect.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>color changing effect using css</title>
<style>
.blinker{
font-family: muli,arial,sans-serif;
font-size: 20px;
font-weight: bold;
color:#333;
animation: changecolor 5s infinite;
-moz-animation: changecolor 5s infinite;
-webkit-animation: changecolor 5s infinite;
-ms-animation: changecolor 5s infinite;
-o-animation: changecolor 5s infinite;
}

@keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* Mozilla Browser */
@-moz-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* WebKit browser Safari and Chrome */
@-webkit-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* IE 9,10*/
@-ms-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* Opera Browser*/
@-o-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
</style>
</head>
<body>
<div class="blinker"><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></div>
</body>
</html>


Post a Comment

0 Comments