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

تجريبي

قبل الغوص في الكود، يمكنك الاطلاع على العرض التوضيحي المباشر للتأثير هنا: العرض في Tailwind Playground.

المفهوم

يتم تحقيق الرسوم المتحركة باستخدام فئات الأدوات المساعدة والعناصر الزائفة في Tailwind CSS. سنستخدم فئة Tailwind بعد الفئة الزائفة لإنشاء رسم متحرك متدرج مخروطي يدور حول حقل الإدخال، مما يعطي وهمًا بوجود شهاب يتتبع الحدود.

إعداد HTML وTailwind CSS

في ما يلي بنية HTML وفئات Tailwind CSS اللازمة لإنشاء هذا التأثير:

كسر الكود

إعداد الحاوية

  





 نبدأ بإنشاء حاوية مرنة تقوم بتوسيط المحتوى عموديًا وأفقيًا باستخدام شاشة h (ارتفاع كامل) وbg-أسود (خلفية سوداء).

  
  
  المجمع لحقل الإدخال




  





 يتم تغليف حقل الإدخال داخل div الذي يحتوي على z-10 للتأكد من أنه فوق الحدود المتحركة، وm-auto لتوسيطه داخل الحاوية المرنة، وإخفاء الفائض لاحتواء الحدود المتحركة داخل حدوده.

  
  
  حقل الإدخال مع الحدود المتحركة




  





تم تعيين حقل الإدخال الرئيسي على عرض ثابت قدره 500 بكسل وارتفاع 14 وحدة من الرياح الخلفية.
 تضيف الفئة border-white/50 حدًا شبه شفاف، بينما يمنحها الصنف rounded-md زوايا مستديرة.

bg-black يضبط لون الخلفية على اللون الأسود، ويمزجه مع الحاوية.

  
  
  إنشاء الرسوم المتحركة




  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">




يتم استخدام العنصر الزائف بعد لإنشاء التدرج المخروطي الذي سيتحرك حول الحدود.

after:-inset-[1px] يوسع التدرج قليلاً إلى ما بعد حدود الإدخال، وبعد: يضعه مطلقًا ليغطي منطقة الإدخال بالكامل.

بعد: animate-[spin_4s_infinite] يضيف رسمًا متحركًا مخصصًا يكمل دورة واحدة كاملة كل 4 ثوانٍ.
 بعد:bg-[conic-gradient...] ينشئ تأثير التدرج. نحن نستخدم الفئات من الشفافية إلى الأزرق 600 لتحديد توقفات اللون، مما يعطي تأثيرًا باهتًا يحاكي الشهاب.

  
  
  تصميم حقل الإدخال




  



الإدخال نفسه شفاف (bg-شفاف) ويشغل كامل ارتفاع وعرض الأصل.
 تقوم فئة text-lg بتغيير حجم النص، بينما يضمن text-white وplaceholder:text-white/40 أن النص والعنصر النائب مرئيان على الخلفية المظلمة.
أخيرًا، focus:outline-none يزيل مخطط التركيز الافتراضي للحفاظ على التصميم المخصص.

  
  
  خاتمة


 مع بضعة أسطر فقط من Tailwind CSS وقوة العناصر الزائفة، يمكنك إنشاء تأثيرات لافتة للنظر مثل هذه الرسوم المتحركة لحدود النجوم. هذا التأثير ليس فقط ممتعًا من الناحية الجمالية ولكنه أيضًا سهل التنفيذ والتخصيص لمشاريعك الخاصة. لا تتردد في تعديل الألوان والتوقيت والخصائص الأخرى لتناسب احتياجات التصميم الخاصة بك!

تعليمات سعيدة!

صورة الغلاف بواسطة Juskteez Vu على Unsplash