Home آموزش طراحی سایت آموزش سی اس اس ایجاد افکت ضربان قلب به کمک CSS

ایجاد افکت ضربان قلب به کمک CSS

9
بدون لایک!
27

ایجاد افکت ضربان قلب به کمک css

سلام به همه خوانندگان عزیز ویکی وردپرس

این اولین پست من به عنوان نویسنده در ویکی وردپرسه و برای شروع میخوایم یه افکت جالب و در عین حال خیلی ساده رو باهم طراحی کنیم. نکته اصلی این افکت، استفاده از animation و keyframe هستش که سعی میکنم سر فرصت تو یه پست به صورت جداگونه دربارش صحبت کنم.

قبل از توضیحات بیشتر اول دموی این افکت رو با هم ببینیم:

See the Pen mOZpgm by abbas (@AbbasH90) on CodePen.

خب همونطور که توی دمو میبینید یه دکمه ساختیم که توش نوشته شده «افزودن به علاقه‌مندی‌ها» و با استفاده از before یه قلب توی دکممون قرار دادیم. بعد با یکمی استایل دهی تونستیم ظاهر دکمه رو یکمی جذاب تر کنیم. برای نوشتن CSS هم از SCSS استفاده کردیم که کارمون اصولی تر باشه.

البته کاراکتر قلبی که ما استفاده کردیم یه سمبل یونیکد هست و اگه میخواید کارتون خوشگل تر دربیاد پیشنهاد میکنم از فونت آیکن هایی مثل FontAwesome استفاده کنید.

امیدوارم خوشتون اومده باشه و تو کارهاتون استفاده کنید 🙂

9 نظر

  1. جوجه باغ ملکوت

    دسامبر 27, 2016 در 8:59 ب.ظ

    بله خیلی خوشمون اومد
    مرسی

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 27, 2016 در 9:03 ب.ظ

      خواهش میکنم
      خوشحالم پسندیدین 🙂

      نقل قول

  2. حسین 🎓

    دسامبر 28, 2016 در 1:24 ب.ظ

    ممنون کاربردی بود لطفا فقط کد هارو به صورت جدا هم بگذارید😤

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 28, 2016 در 8:00 ب.ظ

      سلام حسین جان خواهش میکنم
      توی پنجره دمو اگه روی دکمه های Html و Scss که بالاش هستند کلیک کنید کدهای هر قسمت رو میتونید ببینید

      نقل قول

  3. مستر کد

    دسامبر 28, 2016 در 1:29 ب.ظ

    مرسی scss چی هست?

    نقل قول

    • ایلیا پژوهیده

      ایلیا پژوهیده

      دسامبر 28, 2016 در 3:25 ب.ظ

      نسخه پیشرفته css که میتوان با آن کدنویسی حرفه ای کرد.

      نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 28, 2016 در 8:03 ب.ظ

      سلام دوست عزیز
      بله همونطور که ایلیا جان گفتن SCSS که در واقع sass گفته میشه یه نوع سبک جدید نوشتن css هست که میتونید داخلش از متغیر و توابع شرطی و خیلی چیزهای دیگه استفاده کنید که توی css وجود ندارند.
      واسه اطلاعات بیشتر اینجارو ببینید: http://sass-lang.com
      موفق باشی

      نقل قول

  4. محمد مهدی افقری

    دسامبر 28, 2016 در 3:27 ب.ظ

    خسته نباشین خوب بود
    روش های مختلفی داره این ضربان ولی همینم خوبه خسته نباشید

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 28, 2016 در 8:05 ب.ظ

      سلام محمد مهدی جان. خواهش میکنم
      درسته میشه با جاواسکریپت هم این کارو کرد ولی فکر میکنم راحت ترین راهش استفاده از همین انیمیشن css باشه. اگه با روش های دیگه ای تونستی بزنی لینک CodePen رو بذار ما هم استفاده کنیم
      موفق باشی

      نقل قول

ارسال نظر

ایمیل شما منتشر نمیشودفیلد های ستاره دار اجباری هستند *