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

[1993]

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

[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>

[1993]

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

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


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>

[1993]

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


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: