هذا الأنيميشن هو نوع من الاستغلال اللطيف لما يعرف بال pseudo elements مع ما يعرف بال pseudo classes في لغة ال css.. ايش هو ال pseudo elements & classes و ما هي طريقة عمل ال animation كما في المقطع... 👇🏻
@PrograminLovers @amnocm
@PrograminLovers @amnocm
ال pseudo elements هي خاصية في ال css تمكنك من استهداف جزئية محددة من العنصر لتطبيق style معين عليه بدلا من استهداف كامل العنصر.. فمثلا بإمكانك تغيير لون السطر الأول من النص أو من ال<p> بدلا من تغيير لون النص في ال<p> كاملا .. كما المثال في الصورة
باستخدام ال pseudo elements بإمكانك اتستهداف جزئيات مختلفة من العنصر مثل: أول سطر، أول حرف.. الخ، لكن أحد ال pseudo elements الشهيرة هي ال before و التي تسخدم لإضافة (حرف - صورة - نص) قبل ال element و ال after للإضافة بعدها.. كما المثال في الصورة..
أما ال pseudo classes فهي طريقة تمكنك من استهداف العنصر و تطبيق style عليه عندما يتحقق ظرف معين لهذا العنصر مثل أن يتم وضع المؤشر فوقه (hover) أو يتم الضغط عليه (click).. الخ
النتيجة من تطبيق ال pseudo class السابق هي كالتالي:
الفكرة تكمن في إخفاء المحتوى الموجود في ال pseudo element مبدئيا باستخدام خاصية ال opacity و من ثم إظهاره عن طريق استغلال ال hover effect من ال pseudo classes مع استخدام ال transition في ال css لإضافة تأثير ال animation.. بالإضافة لاستخدام خواص أخرى معروفة في ال css لتحسين المظهر
أخيرا نتيجة للكود السابق ستكون النتيجة كالتالي بنفس التأثير و الخطوات المستخدمة لعمل الأزرار في بداية السلسلة.. كمية الأشكال و التخصيصات المختلفة التي يمكن عملها باستخدام نفس الفكرة من دمج ال pseudo elments & classes كبيرة.. فأرنا ما لديك
جاري تحميل الاقتراحات...