؟ مقدمة

هل سبق لك أن أردت إنشاء ساعة تقوم بما هو أكثر من مجرد معرفة الوقت؟ ماذا لو كانت كل ثانية تمضي قد تجلب موضوعًا جديدًا؟ مع CSS @property وقوة معالجة الألوان hsl()، يمكنك ذلك! في هذه المقالة، سأرشدك خلال عملية إنشاء "ساعة السمات" الديناميكية والمثيرة بصريًا والتي تغير ألوانها (المعروفة أيضًا باسم سمتها) في كل ثانية، مما يضفي حياة جديدة على كل لحظة!.

⁉️ المفهوم

الفكرة وراء "الساعة ذات السمات" بسيطة ولكنها آسرة: مع مرور الوقت، يتغير مظهر الساعة. سنعمل على الاستفادة من خصائص CSS المخصصة لتحريك درجة الألوان (حسنًا، إنها زاوية بالدرجات) وتحديث سمة الساعة كل ثانية (أيضًا لكل دقيقة وساعة أيضًا). النتيجة؟ ساعة سلسة ومتغيرة باستمرار، ساحرة بقدر ما هي عملية.

؟ العرض التوضيحي والكود

حسنًا، إليك الكود الكامل لـ "Theme Clock". سأقوم بتفصيلها لفهم كيفية مساهمة كل جزء في التأثير الكلي.

؟ كسر الكود

1.خصائص CSS المخصصة و@property: يكمن السحر وراء ساعة تغيير السمات هذه في استخدام خصائص CSS المخصصة وقاعدة @property. نحدد خاصية مخصصة --angle تتحكم في درجة لون ألوان الساعة باستخدام وظيفة hsl(). ومن خلال تحريك هذه الخاصية لمدة تزيد عن 60 ثانية باستخدام قاعدة @keyframes، فإننا نحقق انتقالًا مستمرًا للألوان.

• خاصية مخصصة --angle: تتحكم هذه في درجة لون hsl()، مما يؤدي إلى تغيير السمة ديناميكيًا. ويجعل أيضًا الخاصية المخصصة قابلة للتحريك، مما يسمح بالانتقالات السلسة.
• CSS @keyframes anim: تقوم هذه الرسوم المتحركة بتدوير قيمة تدرج اللون من 0 إلى 360 خلال 60 ثانية، مع التدوير عبر نطاق الألوان بأكمله.

2. التبديل الديناميكي للموضوع: يتيح زر التبديل للمستخدمين التبديل بين السمات الفاتحة والداكنة. يؤدي النقر على الزر إلى تبديل فئة داكنة في عنصر html، مما يؤدي إلى تغيير مظهر الساعة.

• تبديل الوضع الفاتح/الداكن: يمكن تبديل السمة باستخدام زر يقوم بتحديث مظهر الساعة ديناميكيًا.
• الرسوم المتحركة لتدوير الحاوية: تدور حاوية الساعة عندما يتغير المظهر، مما يضيف تأثير انتقال دقيق.

3. تحديث الساعة والوقت: يتعامل جزء JavaScript من الكود مع تحديث عقارب الساعة وعرض الوقت الرقمي. تقوم وظيفة setTime بإعادة حساب مواضع عقرب الساعات والدقائق والثواني في كل ثانية، مع تحديث عرض الوقت والتاريخ أيضًا.

• وظيفة "المقياس": لتحويل الوقت الحالي إلى درجات مقابلة لتدوير عقارب الساعة.

- تحديثات في الوقت الفعلي : يتم تحديث عقارب الساعة والوقت الرقمي كل ثانية لتتناسب مع الوقت الحالي.

؟ جمع جميع الأجزاء معا

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

ضع لايك ❤️، وتابع للمزيد من alishata128