كيفية تحريك الحدود المتقطع مع CSS

يمكن أن تزين الحدود المزخرفة أي عنصر في الصفحة ، لكن حدود CSS تكون محدودة عندما يتعلق الأمر بالأناقة. يطوّر المطورون غالبًا حلولًا مثل حدود التدرج اللوني CSS وحدود SVG والحدود المتعددة والمزيد لمحاكاة حدود حدود الصندوق ورسومها المتحركة وترقيتها.

اليوم سننظر في اختراق بسيط للحدود المتقطعة: رسم متحرك متقطع. سيتم إنشاء الحدود المتقطعة المتحركة باستخدام فقط الخطوط العريضة و مربع الظل, لا تترك أي ضجة حول الاحتقالات ، منذ ذلك الحين الخطوط العريضة معتمد من IE8 وما بعده. بهذه الطريقة ، سيظل المستخدم قادرًا على رؤية الحدود بخلاف استخدام SVG أو التدرج اللوني. مع هذا ، يمكنك أيضًا إنشاء شرطات ثنائية اللون. لنلقي نظرة.

خلق الحدود

سنقوم أولاً بإنشاء الحدود. لهذا ، سوف نستخدم مخططًا متقطعًا وظل صندوقي.

 .لافتات المخطط: 6px متقطع الأصفر؛ صندوق الظل: 0 0 0 6px # EA3556؛ ... 

ال الخطوط العريضة سوف تحتاج إلى كل قيمها ؛ العرض والنوع واللون. ال مربع الظل يحتاج فقط القيمة ل انتشار الذي يجب أن يكون هو نفسه عرض المخطط التفصيلي ولونه. كل من المخطط التفصيلي والظل المربع معًا سيخلقان تأثير الشرطات ذات اللونين.

يمكنك بعد ذلك ضبط عرض المربع أو ارتفاعه لإطلالة حدك المرغوب على الزوايا.

موحية الحدود

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

keyframes animateBorder to outline-color: # EA3556؛ صندوق الظل: 0 0 0 6px أصفر ؛ 

يمكنك استهداف لون المخطط التفصيلي باستخدام مخطط الألوان خاصية longhand ، ولكن بالنسبة إلى box shadow ، سيتعين عليك إعطاء كل القيم إلى خاصية shorthand في الوقت الحالي.

بمجرد أن تصبح الرسوم المتحركة جاهزة ، أضفها إلى الصندوق.

.لافتات المخطط: 6px متقطع الأصفر؛ box-shadow: 0 0 0 6px # EA3556؛ الرسوم المتحركة: 1s animateBorder لانهائي ؛ ...

التحولات على الحدود

على سبيل المثال الانتقال ، سنضيف حدودًا للصور ونحرك تلك الموجودة على التحويم. يمكنك أيضًا تغيير حجم الحدود لتأثيرات مختلفة.

.الصور المخطط: 20px dashed # 006DB5؛ box-shadow: 0px 0px 0px 20px # 3CFDD3؛ انتقال: جميع 1s ؛ .... الصور: hover outline-color: # 3CFDD3؛ box-shadow: 0 0 0 20px # 006DB5؛ 

الآن ، مرر الماوس فوق هذه الصور لترى حدود CSS المتقطعة بكل مجدها المتحرك.

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