تغییر رنگ خودکار و مداوم

[Reza G]

ابتدا در یک فایل css این کدها رو قرار بدید که برای اجرا تحت مرورگرهای مختلف هست:

@-webkit-keyframes color_change {
0% {background-color: blue;}
25% {background-color: orange;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: red;}
}
@-moz-keyframes color_change {
0% {background-color: blue;}
25% {background-color: orange;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: red;}
}
@-ms-keyframes color_change {
0% {background-color: blue;}
25% {background-color: orange;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: red;}
}
@-o-keyframes color_change {
0% {background-color: blue;}
25% {background-color: orange;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: red;}
}
@keyframes color_change {
0% {background-color: blue;}
25% {background-color: orange;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: red;}
}

.colorful {
width: 50px;
height: 50px;
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;  
-ms-animation: color_change 1s infinite alternate;  
-o-animation: color_change 1s infinite alternate;  
animation: color_change 1s infinite alternate;   
}

به این ترتیب در 5 گام، رنگ های شما می چرخند. می تونید از کدهای رنگ هم استفاده کنید.

بعدش یک div به این صورت تعریف کنید و داخل کدهای html خودتون جایگذاریش کنید:

<div class="colorful">هرچی دوست دارید</div>