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

سلام
اگه بخوایم تو css یک عنصر مثلا عکس و یا نوشته به صورت خودکار و مدام رنگش عوض شه چه کدی استفاده میشه؟
برای چرخ مدام هم اگه میدونین لطف کنین بگین.
ممنون

ابتدا در یک فایل 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>

---

نقل قول:

---

نوشته اصلی توسط 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>

---

---

خیلی ممنونم، کار میکنه.
فقط این پس زمینه نوشته رنگش عوض میشه.کدی نیست که خود نوشته رنگش تغییر کنه؟

ببینید این به کارتون میاد:

کد:

---

p {color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}


@-webkit-keyframes hue {
from {-webkit-filter: hue-rotate(0deg);}
to {-webkit-filter: hue-rotate(360deg);}
}

---

داخل html هم اینو بذارید:

کد:

---

<p>متن مورد نظر</p>

---

نقل قول:

---

نوشته اصلی توسط Reza G

ببینید این به کارتون میاد:

کد:

---

p {color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}


@-webkit-keyframes hue {
from {-webkit-filter: hue-rotate(0deg);}
to {-webkit-filter: hue-rotate(360deg);}
}

---

داخل html هم اینو بذارید:

کد:

---

<p>متن مورد نظر</p>

---

---

آره همین خوبه
خیلی مچکرم:77: