١- كود HTML:
هو عبارة عن <h3> و <div> داخله <div> ثاني اللي هم الماوس وكرة الماوس وكذا خلصنا كود HTML.
هو عبارة عن <h3> و <div> داخله <div> ثاني اللي هم الماوس وكرة الماوس وكذا خلصنا كود HTML.
٢- كود CSS:
١-
يستهدف body:
غيرت لون الخلفية واستخدمت flexbox عشان أخلي محتوى الصفحة في النص
١-
يستهدف body:
غيرت لون الخلفية واستخدمت flexbox عشان أخلي محتوى الصفحة في النص
٢-
يستهدف mouse:
حددت حجمه وأضفت له حدود وخليت display:flex عشان يكون <div> الثاني (كرة الماوس) بداخله.
يستهدف mouse:
حددت حجمه وأضفت له حدود وخليت display:flex عشان يكون <div> الثاني (كرة الماوس) بداخله.
٣-
يستهدف mouse-wheel:
حددت حجمه وخليت border-radius:50% عشان تصير دائرة، margin:auto عشان تصير بالنص وربطتها ب animation.
يستهدف mouse-wheel:
حددت حجمه وخليت border-radius:50% عشان تصير دائرة، margin:auto عشان تصير بالنص وربطتها ب animation.
٤- تعريف animation عن طريق keyframes:
بالبداية حركت الكورة إلى تحت عن طريق (transform: translateY:-1rem) وفي النهاية حركت الكورة إلى فوق عن طريق
(transform:translateY:1rem)
بالبداية حركت الكورة إلى تحت عن طريق (transform: translateY:-1rem) وفي النهاية حركت الكورة إلى فوق عن طريق
(transform:translateY:1rem)
رابط كامل الكود:
codepen.io
codepen.io
وبكذا خلصنا شرح الكود إن شاء الله استفدتوا🙏🏻.
Loading suggestions...