Make It Blink HTML Tutorial - How to Use Blink Tag، مع أمثلة التعليمات البرمجية

في الأيام الأولى للويب ، كانت عناصر HTML مثل علامة blink هي طرق أصلية لإضافة بعض تأثيرات الحركة لإضفاء الحيوية على صفحة الويب. كيف يمكننا استخدام هذه الرسوم المتحركة اليوم لإضافة توهج إلى مواقعنا وتطبيقاتنا؟

  • ما هو وميض علامة HTML؟
  • كيف تستخدم علامة الوميض؟
  • هل لا يزال بإمكانك استخدام علامة وميض؟
  • إعادة إنشاء علامة وميض مع الرسوم المتحركة CSS

ما هو وميض علامة HTML؟

علامة blink ( ) هي علامة HTML قديمة تجعل محتوى هذه العلامة تومض ببطء.

كان هذا ، إلى جانب بعض العلامات القديمة الأخرى مثل علامة التحديد ( ) ، طريقة سهلة لإضافة تأثيرات رسوم متحركة بسيطة إلى موقعك.

كيف تستخدم علامة الوميض؟

نظرًا لأن علامة blink كانت عنصر HTML بسيطًا ، فستستخدمها بما يتماشى مع المحتوى الخاص بك.

على سبيل المثال ، إذا أردت أن تومض كلمة "blink" في blink-182 ، يمكنك كتابة HTML التالي:

blink-182

هل لا يزال بإمكانك استخدام علامة وميض؟

كما لاحظت في gif أعلاه ، فإن هذه العلامة قديمة.

هذا يعني أنه لا يمكنك استخدام علامة HTML الوامضة نفسها. ومع ذلك ، لا ينبغي أن يمنعنا ذلك من إعادة صنعها بكل مجدها الوامض.

ملاحظة: تم إهمال علامة Blink بسبب مخاوف تتعلق بإمكانية الوصول. يرجى إجراء البحث قبل محاولة استخدام حل يوفر نفس التأثير ، حيث يجب علينا جميعًا بذل جهد لجعل مشاريعنا شاملة قدر الإمكان.

إعادة إنشاء علامة وميض مع الرسوم المتحركة CSS

في عالم تطوير الويب اليوم ، يتم التعامل مع الرسوم المتحركة بشكل عام باستخدام CSS أو JavaScript. باستخدام الرسوم المتحركة لـ CSS ، يمكننا إعادة إنشاء علامة blink ببضعة أسطر والعودة إلى العمل مرة أخرى.

باستخدام CSS التالية:

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

يمكنك إضافة .blinkفئة إلى أي عنصر HTML لجعله يومض.

blink-182

تحديث علامة الوميض

هذا عام 2020 ، ماذا لو أردنا شيئًا أكثر سلاسة؟

حسنًا للبدء ، يمكننا جعل الرسوم المتحركة تتلاشى عن طريق إزالة stepsتعريفات الرسوم المتحركة.

.blink { animation: blink 1s infinite; } 

أو ماذا لو أردنا جعله يتلاشى مثل تأثير الخيال العلمي؟

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

أو حتى تأثير نمو وتلاشي لطيف.

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 

السيطرة على الرسوم المتحركة باستخدام CSS

على الرغم من أنك قد لا تتمكن من استخدام علامة وميض ، لا يزال لديك الكثير من الخيارات. يوفر CSS عددًا كبيرًا من خيارات الرسوم المتحركة في الأصل ، لذلك سواء كنت ترغب في إعادة إنشاء هواية HTML المفضلة لديك أو إعادة إنشاء تسلسل عنوان Alien ، فإن الاحتمالات لا حصر لها تقريبًا.

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية