كيفية تصميم تأثير اللمبة المتوهجة باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء تأثير اللمبة المتوهجة باستخدام HTML و CSS فقط

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

 

في هذا البرنامج (Glowing Bulb Effect باستخدام HTML و CSS فقط) ، على صفحة الويب ، يوجد مصباح بتأثير متوهج وزر أيضًا لتشغيل أو إيقاف تشغيل المصباح المتوهج. هذا برنامج CSS خالص مما يعني أنني استخدمت HTML و CSS فقط لإنشاء هذا التأثير المتوهج. لإنشاء هذا التأثير ، استخدمت صورتين للمصباح وقم بتبديل هذه الصور عند النقر فوق الزر.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Glowing Bulb Effect باستخدام HTML و CSS فقط).

 

في هذا الفيديو ، شاهدت التأثير المتوهج للمصباح وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. لإنشاء هذا الزر القابل للنقر عليه وتغيير حالة المصباح عند النقر ، استخدمت HTML <input type = ”checkbox”> وتم دمجه مع التسمية. يمكنك أيضًا استخدام JavaScript لتغيير حالة المصباح.

 

إذا كنت مبتدئًا ولديك HTML و CSS فقط ، فيمكنك أيضًا إنشاء هذا النوع من التأثير وتوسيع مهاراتك التعليمية حتى الآن. إذا كنت تحب هذا البرنامج (Glowing Bulb Effect باستخدام HTML و CSS فقط) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

 

تأثير اللمبة المتوهجة باستخدام HTML & CSS فقط [أكواد المصدر]

لإنشاء هذا البرنامج (Glowing Bulb Effect فقط باستخدام HTML & CSS). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow