كيفية إنشاء قلب ينبض باستخدام CSS خالص لعيد الحب الخاص بك

في الرابع عشر من فبراير من كل عام ، يتبادل العديد من الأشخاص البطاقات أو الحلوى أو الهدايا أو الزهور مع "عيد الحب" الخاص بهم. يُطلق على يوم الرومانسية الذي نسميه عيد الحب اسم شهيد مسيحي ويعود تاريخه إلى القرن الخامس ، ولكن أصوله تعود إلى عطلة Lupercalia الرومانية.

حسنًا حتى الآن جيد جدًا. ولكن ما الذي يمكن أن يفعله المبرمج في عيد الحب؟

جوابي هو: استخدم CSS وكن مبدعًا!

أنا حقًا أحب CSS. إنها ليست لغة معقدة حقًا (لا تعتبر لغة برمجة في معظم الأوقات). ولكن مع بعض الهندسة والرياضيات وبعض قواعد CSS الأساسية ، يمكنك تحويل متصفحك إلى لوحة إبداعية!

دعنا نبدأ. كيف تصنع قلبًا بهندسة نقية؟

أنت فقط بحاجة إلى مربع ودائرتين. حق؟

ويمكننا استخلاص أن مع وجود عنصر واحد، وذلك بفضل ::afterو ::beforeالزائفة العناصر. الحديث عن العناصر الزائفة ، ::afterهو عنصر زائف يسمح لك بإدراج محتوى في صفحة من CSS (دون الحاجة إلى أن يكون في HTML). ::beforeهو نفسه تمامًا ، فهو فقط يُدرج contentقبل أي محتوى آخر في HTML بدلاً من بعده.

بالنسبة لكلا العنصرين الزائفين ، فإن النتيجة النهائية ليست في الواقع في DOM ، ولكنها تظهر على الصفحة كما لو كانت كذلك.

لذلك دعونا نصنع قلبنا.

.heart { background-color: red; display: inline-block; height: 50px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); position: absolute; left: 45%; top: 45%; width: 50px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .heart:before { top: -25px; left: 0; } .heart:after { left: 25px; top: 0; }

يمكنك إشعار بسهولة أن نحدد مربع وموقعها عن طريق استخدام 'القلب' الطبقة الرئيسية والدائرتين مع ::beforeو ::afterالزائفة العناصر. الدوائر في الواقع ما هي إلا مربعين إضافيين تم تقليل نصف قطرها إلى النصف.

ولكن ما هو القلب الذي لا ينبض؟

لنقم بإنشاء نبضة. هنا سنستخدم قاعدة keyframes @. يتم استخدامkeyframes CSS at-rule لتحديد سلوك دورة واحدة من الرسوم المتحركة لـ CSS.

عندما نستخدم قاعدة الإطارات الرئيسية ، يمكننا تقسيم فترة زمنية إلى أجزاء أصغر وإنشاء تحويل / رسم متحرك بتقسيمه إلى خطوات (كل خطوة تتوافق مع نسبة مئوية من اكتمال الفترة الزمنية).

لذلك دعونا نخلق نبضات القلب. تتكون الرسوم المتحركة لنبضات القلب من 3 خطوات:

@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }
  1. في 0٪ من الفترة الزمنية نبدأ بدون تحول.
  2. في 20٪ من الفترة الزمنية ، نقوم بتوسيع الشكل إلى 125٪ من حجمه الأولي.
  3. في 40٪ من الفترة الزمنية نقوم بتوسيع الشكل إلى 150٪ من حجمه الأولي.

بالنسبة للـ 60٪ المتبقية من الفترة الزمنية ، نترك وقتًا لعودة قلبنا إلى حالته الأولية.

أخيرًا علينا تخصيص الرسوم المتحركة لقلبنا.

.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }

هذا هو!

لدينا قلب ينبض إلى الأبد.

أو ربما ما دام حبك يدوم ...

لا تتردد في التحقق من Codepen ذات الصلة:

أتمنى لك عيد حب رائع!