متحرک سازی دکمه علاقه مندی در Css

ساخت دکمه علاقه مندی با طعمی متفاوت

چند روز قبل دمویی برای متحرک سازی دکمه علاقه مندی دیدم که تصمیم به استفاده از آن در یک کارت کردم که در این مطلب قصد اشتراک آن را با شما دارم.

دمویی که وجود داشت با استفاده از SVG ساخته شده بود و همینطور انیمیشن آن از لحاظ کارایی در سطح پایینی قرار داشت آن دمو را می توانید در این آدرس مشاهده کنید و همینطور تبدیل شده آن در زیر آمده است (بر روی ستاره کلیک کنید)

 

See the Pen Star animation by Mojtaba Seyedi (@seyedi) on CodePen.

 

نکته بعدی که در این کارت نیاز به توجه ویژه دارد ساخت نوار چند رنگ است که اگر به کد نگاهی داشته باشید خواهید دید که با استفاده از گرادینت در CSS ساخته شده است. معمولا افراد کار با گرادینت را می دانند اما طرز ساخت نوار اینچنینی را نه, چون نیازمند یک ترفند ساده است.

برای این که بتوانید با استفاده از گرادینت چند رنگ را در کنار هم بیاورید بدون اینکه به صورت طیف نمایش داده شوند کافی است گرادینت را به صورت زیر بنویسید:


div {
  background-image: 
  linear-gradient(to bottom, green 0%, green 33.3%, white 0% , white 66.66%, red 0%, red 100%);
}

خروجی به صورت زیر خواهد بود:

گرادینت

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

طرح الهام بخش زیر را هم بررسی کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *