في البداية نقوم بعمل البنية الخاصة بالكود وهي عبارة عن زر Button أو Span أو A كما تحب وبداخلها تضع الأيقونة التي نريد عمل تأثير Heartbeat لها ويجب عليك إستعمال مكتبة
FontAwesome لتحصل على أيقونة القلب أو يمكنك الإستعانة بأي أيقونة أخرى أو حتى صورة لا مشكلة وبنية الكود كالتالي.
نقوم بعمل التنسيقات الأولية لعنصر ال Anchor وهي كالتالي
- خلفية للعنصر باللون الأحمر
- لون العناصر الداخلية أبيض
- العرض والطول 120 بيكسل
- الحواف دائرية
- نوع العنصر Block حتى يحترم الابعاد ويأخذ خواص ال Block
- ال Margin لتوسيط العنصر في الصفحة ليس إلا يمكنك إلغائه
- توسيط النص
- عمل هوامش داخلية قدرها 30 بيكسل حتى تتوسط الأيقونة في وسط العنصر يمكنك إستعمال هامش مختلف على حسب حجم الصورة الموجودة لديك أو الأيقونة.
والآن سوف نقوم بعمل التأثير على العنصر عند المرور عليه بالماوس ولذلك سوف نتأكد أن لون العنصر لن يتغير عند ال Hover بوضع الخواص التالية
ثم نقوم بوضع تأثير ال Animation الذي سوف نقوم بعمله على العنصر الموجود داخل ال Anchor عند المرور على ال Anchor نفسه. وال Animation هنا قمنا بكتابته بالكود المختصر وأول شيء هو إسم ال Animation نفسه ثم مدة التنفيذ وبعدها عدد مرات التنفيذ جعلناها إلى مالانهاية ثم طريقة عرض ال Animation قمنا بعملها بشكل خطي.
الآن وقت عمل تأثير ال Animation نفسه وهو عبارة عن تصغير العنصر وتكبيره مرة أخرى بواسطة خاصية Transform Scale وفيما يلي الكود الخاص بعمل ال Animation على كل المتصفحات
والآن مع تجربة الكود قم بعمل Hover على صورة القلب لترى التأثير
0 تعليقات