سلام
اگه بخوایم تو css یک عنصر مثلا عکس و یا نوشته به صورت خودکار و مدام رنگش عوض شه چه کدی استفاده میشه؟
برای چرخ مدام هم اگه میدونین لطف کنین بگین.
ممنون
سلام
اگه بخوایم تو css یک عنصر مثلا عکس و یا نوشته به صورت خودکار و مدام رنگش عوض شه چه کدی استفاده میشه؟
برای چرخ مدام هم اگه میدونین لطف کنین بگین.
ممنون
ابتدا در یک فایل css این کدها رو قرار بدید که برای اجرا تحت مرورگرهای مختلف هست:
به این ترتیب در 5 گام، رنگ های شما می چرخند. می تونید از کدهای رنگ هم استفاده کنید.کد:@-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; }
بعدش یک div به این صورت تعریف کنید و داخل کدهای html خودتون جایگذاریش کنید:
کد:<div class="colorful">هرچی دوست دارید</div>
رضا قلعهخانی: وردپرس و WHMCS - طراحی و راهاندازی انواع وبسایت شخصی، شرکتی و فروشگاهی
تماس: ارسال ایمیل
ببینید این به کارتون میاد:
داخل html هم اینو بذارید:کد: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);} }
کد:<p>متن مورد نظر</p>
رضا قلعهخانی: وردپرس و WHMCS - طراحی و راهاندازی انواع وبسایت شخصی، شرکتی و فروشگاهی
تماس: ارسال ایمیل
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)