زر بأضاءة متحركة بأستخدام HTML, CSS

x32x01 · 14 نوفمبر 2023

لانشاء زر مشابه . سنقوم بوضع عنصرين فوق بعض ... يعني عنصر في الخلف يمثل الخط الأحمر , و فوقه عنصر أصغر منه يغطيه بحيث تظهر الأطراف من العنصر الخلفي فقط. عند تدوير العنصر الخلفي سيصبح لدينا نفس التأثير.
اذا :
أولا علينا انشاء عنصر حاوية يمتلك عنصرين داخله في كود الHTML لنعدل عليهما لاحقا باستعمال الCSS:
سننشئ عنصر بمثابة حاوية للعنصرين : نعطيه "btn-container" كـclass .
ثم سنقوم بانشاء بداخله عنصرين و يحملان كلاسين هما :

"outline" : و هو العنصر الخلفي و الذي يمثل التأثير الذي يدور.
"inner-container" : و هو العنصر الأمامي الذي يغطي العنصر السابق.

سيصبح كود الhtml هكذا:

HTML:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

ثانيا سنعمل على كود الـCSS . سنقسم الأمر الى مرحلتين : مرحلة وضع العنصرين فوق بعض ثم مرحلة التحريك.
المرحلة الأولى:
سنقوم في هذه المرحلة بترتيب العناصر فوق بعض. لذلك سنقوم باستعمال خاصية position في الـcss :
اولا سنضيف الكود التالي position: relative لكلاس btn-container و يعني أن هذا العنصر سيصبح مرجع العناصر التي داخله في ما يخص موقعها ...
لذلك سمينا العنصر بcontainer اي حاوية العناصر التي داخله.
ثم سنقوم بجعل كل الأبناء في هذا العنصر (العناصر داخله) تتمركز الوسط و ذلك عن طريق الكود التالي:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

بعدها سنقوم باخفاء كل ما يخرج عن اطار العناصر و ذلك لـأن أحد الأبناء سيكون أكبر من الحاوية و لذلك نريد اخفاء الجزء الخارج عن اطارها.

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

سيصبح كود btn-container كالتالي:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

سنقوم بعدها بكتابة كود الcss الخاص بكلاس outline لترتيب العنصر الخلفي, ما سنحتاجه هو تغيير طريقة تموقعه , تلوينه و تغيير حجمه:

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

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

حيث سيصبح العنصر حر و لا يتبع التسلسل و يتموقع في المنتصف تلقائيا (لأننا قمنا ببرمجة ذلك في العنصر الأب).
جرب نزع هذا السطر لاحقا لتلاحظ الفرق

- للتلوين سنستخدم دالة اسمها : conic-gradient والتي تلون زاوية من العنصر فقط ... سنقوم بتلوين زاوية باللون الأحمر و الزاوية الأخرى بالشفاف:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

نحتاج الآن لأن يكون حجم هذا العنصر أكبر من الحاوية ( بالرغم أن الجزء الذي بخارج الحاوية لن يكون ظاهر) و السبب هو أننا سنجعل هذا العنصر يدور لاحقا (اذا لم تفهم السبب فقط اجعل الحجم بنفس حجم العنصر و ستفهم لاحقا)

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

الكود الاجمالي سيصبح:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

كخطوة أخيرة في المرحلة الأولى سنقوم بكتابة الكود الخاص بكلاس inner-container :
نفس ما قمنا به في العنصر السابق سنقوم به في هذا العنصر . لكن هذا العنصر سيكون اصغر حجما قليلا من الحاوية و ذلك ليظهر العنصر الذي خلفه outline . بالتالي سيغطيه ما عدا الأطراف

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

المرحلة الثانية: التحريك
في لغة الcss يمكن انشاء تحريك animation عن طريق keyframes@.
لانشاء التأثير سنحتاج لتدوير outline حتى 360 درجة . الأمر بسيط ... سنقوم بكتابة الكود التالي:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

= 0% تعني نقطة البداية في التحريك ... ما داخل القوسين هو الوصف لبداية التحريك.
= 100% تعني نقطة نهاية التحريك .
= لو كتبت 50% يعني منتصف التحريك
= لو كتبت 25% يعني في ربع التحريك و طبعا ما داخل الأقواس هو وصف لهذه النقطة من التحريك ...
يعني تستطيع انشاء نقاط و تغيير الحجم , نوع النص , لون النص , الخلفية ....
الآن نحتاج اضافة التحريك الى كلاس outline . يجب ان يكون التحريك مستمر الى مالانهاية . ايضا يجب يكون التوقيت بين نقطتين بينهما نفس المسافة متساوي ( لست مجبر على فهم هذا الشيء لكن يجب أن تجربه كي تعرف فائدته) .
داخل اضف:

Code:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

الكود كامل :

HTML:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

وهذا كود الـ CSS :

CSS:

يمكنك تسجيل الدخول أو التسجيل لمشاهدة الكود !

زر بأضاءة متحركة بأستخدام HTML, CSS

الدخول أو التسجيل السريع

آخر المشاركات

أحدث المنتجات

إحصائيات المنتدى