iran-rezerv

تغییر رنگ بک گراند با انیمشن های زیبا فقط با چند کلیلک


با سلام خدمت وب کرالی های عزیز.

در این مقاله قصد داریم در مود اموزش طراحی صفحات بک گراندی که رنگ های ان به صورت انیمشن وار تغییر میکنند و نمایه خیلی زیبایی به وب سایت شما مید. قبل رفتن به اموزش این ترفند سایت gradient-animator این کار را برای شما راحت کرده و بدون نیاز به داشتن دانش طراحی و کد نویسی سی اس اس میتونید به راحتی یا چند کلیک بک گراند های فوق العاده ای برای وب سایت خود طراحی نمایید . از این رو از شما میخواهیم که با مراجعه به سایت gradient-animator.com مراجعه کنید و از سازنده کد فوق العاده این روش لذت ببرید.

ولی در اینجا قصد داریم به کد هایی که به شما ازائه خواهد شد رو مختصری توضیح بدیم.

کد ها برای نمونه به این صورت میباشند.



background: linear-gradient(270deg, #666224, #5cd20d); // در این قسمت کد هگزادسیمال زنگ خود را وارد میکند
background-size: 400% 400%; // در این قسمت برای سایز بک گراند را 4 برابر اندازه واقعی خود از چهار جهت بالا و پایین و چپ و راست قرار داده شده اند . این مقدار با افزایش تعداد رنگ ها افزایش میابد.

-webkit-animation: webkral.ir 30s ease infinite;//برای اعمال دائمی دستور انمیشن برای مرورگر گوکل کروم در حالت ease
-moz-animation: webkral.ir 30s ease infinite;//برای اعمال دائمی دستور انمیشن برای مرورگر موزیلا فایرفاکس در حالت ease
-o-animation: webkral.ir 30s ease infinite;//برای اعمال دائمی دستور انمیشن برای مرورگر اوپرا در حالت ease
animation: webkral.ir 30s ease infinite;
@-webkit-keyframes webkral.ir {//اعمال کی فریم برای گوگل کروم
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes webkral.ir {//اعمال کی فریم برای موزیلا فایرفاکس
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes webkral.ir {//اعمال کی فریم برای اوپرا
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes webkral.ir {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

البته برای راحتی کار شما کاربران سایت Gradient Animator رو در پایین برای شما اورده ایم و نیازی نیست شما به وب سایت آن مراجعه کنید !

 

تمامی این کار ها با css3 انجام شده و از هیچ کد جواسکرپتی برای این کار استفاده نشده و هیچ تاثییری بر روی سرعت لود سایت شما ندارد و کاملا بهینه میباشد .

ما از این تغییر رنگ در صفحه لیست قیمت تعرفه های طراحی سایت و درگاه پرداخت  استفاده کرده ایم.

امیدوارم این اموزش برای شما مفید واقع شده باشد .

برای اشتراک گذاری این مطلب بر روی شبکه اجتماعی مورد نظر خود کلیک کنید .


نظرات در مورد پست تغییر رنگ بک گراند با انیمشن های زیبا فقط با چند کلیلک

هیچ نظری تا کنون ثبت نشده است . اولین نفر باشید !

دیدگاهتان را بنویسید

پاسخ به نظر :