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>
<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>
0 Comments