• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6633 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش ساخت افکت زیبای هاور CSS Highlight برای متون inline

0 118 ۲۲ دی ۹۵

css highlight animation

در این مطلب قصد دارم یک افکت زیبا CSS Highlight یا پر رنگ شدن متن انیمیشنی رو به شما آموزش بدم و این افکت زمانی که بر روی اون المنت مورد نظر هاور میکنید، اجرا خواهد شد. این افکت برای متونی که بصورت inline هستن مثل link ها قابل استفاده هست. افکت به این صورت هست که یک لینک تک خطی یا چند خطی قرار دارد و زمانی که بر روی اون هاور میکنیم، رنگ پس زمینه اون از ابتدا تا انتها و بصورت انیمیشنی تغییر میکنه.

برای اینکار یک فایل بنام index.html میسازیم و کدهای اولیه زیر رو در اون قرار میدیم:

میبینید که کدهای ابتدایی رو قرار دادیم و دو فایل هم بصورت link اضافه کردیم. فایل اول مربوط به یک فونت هست که از سایت Google font گرفتیم و فایل دوم هم CSS Reset هست که باعث بازنشاندن کدهای اولیه میشه و همه چی رو 0 میکنه. حالا کدهای HTML زیر رو قرار میدیم:

میبینید که 4 تا div با class = post قرار دادیم و درون هر کدوم از اونا یک لینک با class = fun-hover قرار دادیم و متنی هم برای هر کدوم گذاشتیم. همونطور که مشاهده میکنید درون بعضی از لینکها br قرار دادیم تا متن مربوط به اون لینک بشکنه و به خط بعد بره و به زیبایی افکت افزوده بشه. حالا کدهای CSS زیر رو برای اونا قرار میدیم:

تا اینجا اگر خروجی رو در مرورگر مشاهده کنید بصورت زیر خواهد شد:css highlight animation 2

همونطور که میدونین همه لینکها کلاس fun-hover رو دارن. قدم اول اینه که اینه که با استفاده از ویژگی background-image و با استفاده از linear-gradient یک پس زمینه برای این لینکها قرار بدیم:

همونطور که میبینید تا 50% اول رو transparent کردیم و 50% دوم رو زرد رنگ و خروجی بصورت زیر خواهد شد:css highlight animation 3

به این دلیل دو رنگ رو قرار دادیم که زمانی که هاور میکنیم، یک رنگ تکان بخوره و جای رنگ دیگه رو بگیره. همونطور که دیدید 50% قرار دادیم و بخاطر اینه که دو رنگ بصورت مساوی بتونیم داشته باشیم. برای اینکه هر رنگ بصورت کامل متن مورد نظر رو پوشش بده، ویژگی background-size: 200% رو قرار میدیم:

با اینکار رنگ transparent کل متن رو پوشش میده. حالا حالت هاور رو برای این کلاس تعریف میکنیم:

با اینکار زمانی که بر روی لینکها هاور میکنیم، پس زمینه به اندازه 100% جابجا میشه و رنگ پس زمینه از transparent به زرد تبدیل میشه. برای اینکه این تغییر رو انیمیشنی کنیم، بصورت زیر عمل میکنیم:

دیدید که مدت این تغییر رو برابر با 0.4 ثانیه قرار دادیم و این تغییر پس زمینه در این زمان اتفاق میوفته. اگر خروجی رو ببینید بصورت زیر خواهد بود:css highlight animation 4

میبینید که چقد راحت تونستیم این افکت رو به وجود بیاریم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram