التكبير على صورة مع المؤشر باستخدام كس: طريقة سهلة

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

إن تكبير الصورة بالمؤشر ليس جذابا بصريا فحسب ، بل يضيف أيضا تفاعلا إلى صفحة الويب.

هناك عدة طرق لتنفيذ هذا التأثير باستخدام كس ، لكننا سنلقي نظرة على أبسطها.

من أجل تكبير الصورة عند تحريك المؤشر ، سنستخدم خاصية التحويل:المقياس() بالاشتراك مع الفئة الزائفة :تحوم. تتيح لنا هذه الخاصية تغيير حجم عنصر دون تغيير موقعه على الصفحة. من خلال تعيين القيمة > 1 لخاصية المقياس ، نقوم بزيادة العنصر ، وتنخفض القيمة < 1.

1. تكبير الصورة
2. عند التمرير فوق المؤشر
3. باستخدام كس
4. الطريقة البسيطة
5. تكبير على تحوم
6. التصميم مع المغلق
7. سؤال وجواب
8. كيف يمكنني تكبير صورة عندما تحوم فوق المؤشر باستخدام المغلق?
9. هل من الممكن استخدام هذه الطريقة لتكبير العناصر الأخرى?
10. هل من الممكن تعيين التكبير مختلفة لعناصر مختلفة?

تكبير الصورة

عند إنشاء مواقع الويب ، هناك دائما حاجة لتكبير الصور حتى يتمكن المستخدمون من رؤيتها بمزيد من التفصيل. بدلا من استخدام رموز جافا سكريبت المعقدة ، هناك طريقة سهلة لتكبير صورة عند تحريك المؤشر باستخدام كس. في هذا القسم ، سننظر في هذه الطريقة.

أولا ، تحتاج إلى إنشاء ترميز هتمل باستخدام علامة إمغ:

يوجد أدناه مثال على الكود:

ثم ، سوف نقوم بإضافة رمز كس لتحديد أنماط للصورة وخلق تأثير التكبير:

.زوومابلي-صورة {

الانتقال: تحويل 0.5 ثانية;

}

.زوومابلي-صورة: تحوم {

تحويل: مقياس (1.2);

}

لاحظ أننا أضفنا فئة "صورة زوومابلي" إلى صورتنا. ثم قمنا بتعيين الانتقال إلى خاصية" التحويل " لمدة 0.5 ثانية عند تحريك المؤشر فوق الصورة. عند تحريك المؤشر ، نقوم بتكبير الصورة بنسبة 20 ٪ باستخدام خاصية "المقياس".

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

عند التمرير فوق المؤشر

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

هناك عدة طرق لتنفيذ تكبير الصورة عند تحريك المؤشر ، ولكن أحد أبسطها هو استخدام الفئة الزائفة:التمرير. للقيام بذلك ، تحتاج إلى تعيين أبعاد الصورة المطلوبة وتعيين قيمة التحويل:مقياس() عند تحريك المؤشر.

مثال على الكود:

1. إنشاء كتلة مع صورة:
2. إضافة يلقي المغلق:

• تعيين أبعاد الصورة باستخدام خصائص العرض والارتفاع المغلق.
• قم بتعيين قيمة الانتقال بحيث يحدث تكبير الصورة بسلاسة.
• قم بتعيين قيمة التحويل: مقياس () للفئة الزائفة: تحوم.

نموذج رمز المغلق:

آي إم جي {

العرض: 200 بكسل;

الارتفاع: 200 بكسل;

الانتقال: تحويل 0.3 ثانية سهولة;

}

إمغ: تحوم {

تحويل: مقياس (1.2);

}

نتيجة لذلك ، ستزداد الكتلة التي تم إنشاؤها مع الصورة بنسبة 20 ٪ عند تحريك المؤشر ، وسيتم تحريك تغيير الحجم.

هذا كل شيء! الآن يمكن لمطور الويب بسهولة إضافة تكبير للصورة عند التمرير فوق المؤشر باستخدام قواعد كس بسيطة.

باستخدام كس

لتكبير الصورة عند تحريك المؤشر باستخدام كس ، يتم استخدام الفئة الزائفة :تحوم. تتيح لك هذه الفئة الزائفة تطبيق الأنماط على عنصر عندما يتم تحريك مؤشر الماوس فوقه.

لتكبير الصورة عند تحريك المؤشر ، يمكنك استخدام رمز كس التالي:

إمغ: تحوم {

تحويل: مقياس (1.2);

}

في هذا المثال ، نختار جميع العناصر الموجودة في الصفحة التي تحتوي على مؤشر الماوس. ثم ، باستخدام خاصية التحويل ، قمنا بتعيين تحجيم الصورة باستخدام قيم دالة المقياس (1.2). القيمة هي 1.2 يعني أنه سيتم تكبير الصورة بمقدار 1.2 مرة مقارنة بحجمها الأصلي.

وبالتالي ، عندما يحوم المستخدم فوق الصورة ، فإنه يكبر تلقائيا. عند تحريك المؤشر بعيدا ، تعود الصورة إلى حجمها الأصلي.

الطريقة البسيطة

باستخدام كس ، يمكنك ببساطة تنفيذ تأثير توسيع الصورة عند تحريك المؤشر. للقيام بذلك ، يكفي استخدام خاصية التحويل والطبقة الزائفة :تحوم. فيما يلي الخطوات التي يجب اتباعها:

1. .
2. إلى الحاوية التي تشير إلى المسار إلى الصورة في سمة سرك.
3. اضبط الأبعاد المطلوبة للحاوية باستخدام خصائص العرض والارتفاع.
4. تطبيق الأنماط على الحالة الطبيعية للحاوية:
• اضبط خاصية التحويل على مقياس (1) بحيث يظل حجم الصورة دون تغيير.
• تعيين خاصية الانتقال إلى تحويل 0.3 ثوان سهولة في الخروج لإضافة انتقال سلس عند تغيير التحويل.
5. تطبيق الأنماط على حالة التمرير:
• اضبط خاصية التحويل على مقياس (1.2) لزيادة حجم الصورة.

نتيجة لذلك ، عند تحريك المؤشر فوق الصورة ، سيزداد بمقدار 1.2 مرة. يمكنك ضبط الحجم وسرعة الحركة والمعلمات الأخرى عن طريق تغيير قيم الخصائص في كس.

تكبير على تحوم

التكبير على تحوم هو التأثير الذي يمكن تحقيقه باستخدام كس. يسمح لك بتكبير صورة أو أي عنصر آخر عند تحريك المؤشر فوقها.

لإنشاء هذا التأثير ، نستخدم الفئة الزائفة: تحوم في كس. عندما يحوم المؤشر فوق عنصر ، يتم تطبيق أنماط معينة ، مما يؤدي إلى زيادة العنصر.

لتطبيق تأثير التكبير / التصغير ، استخدم خاصية التحويل ووظيفة المقياس (). تسمح لك وظيفة المقياس () بزيادة أو تقليل حجم العنصر.

مثال على الكود:

1. أولا ، نقوم بإنشاء أنماط للعنصر الذي سيزداد عند التمرير. على سبيل المثال ، إذا أردنا تكبير الصورة ، يمكننا استخدام محدد إمغ. في أنماط هذا المحدد ، حدد القيمة الأولية لخاصية التحويل ، على سبيل المثال ، تحويل: مقياس(1)؛.
2. ثم نضيف فئة زائفة :مرر وقم بتعيين قيمة جديدة لخاصية التحويل ، على سبيل المثال ، تحويل: مقياس(1.2)؛. سيتم تطبيق هذه القيمة فقط عندما يحوم المؤشر فوق العنصر.

نتيجة لذلك ، عندما تحوم فوق عنصر ، سيزداد بنسبة 20 ٪ مقارنة بالحجم الأصلي. يمكنك تغيير القيمة في وظيفة المقياس () للحصول على تأثير التكبير المطلوب.

بالإضافة إلى الصور ، يمكن تطبيق هذا التأثير على عناصر أخرى مثل الأزرار والروابط وكتل النص وما إلى ذلك. فقط إضافة المحدد المطلوب إلى كس وتطبيق أنماط للتكبير على تحوم.

التصميم مع المغلق

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

يمكن للمطورين استخدام أنواع مختلفة من المحددات لتحديد العناصر التي يجب تطبيق قواعد النمط عليها. على سبيل المثال ، يمكن أن تشير المحددات إلى فئات معينة أو معرفات عناصر أو علامات معينة أو حتى حالات العناصر (على سبيل المثال ، تحريك المؤشر).

عناصر التصميم مع كس يسمح لك لخلق تصاميم فريدة من نوعها وتحسين مظهر صفحات الويب. أحد الأمثلة البسيطة على عناصر التصميم باستخدام كس هو تغيير لون خلفية العنصر. يمكننا استخدام خاصية لون الخلفية وتحديد لون معين:

الجسم {

الخلفية اللون: ليتبلو;

}

مثال آخر على استخدام كس هو تعيين الخط وحجمه:

ص {

الخط الأسرة: أريال ، بلا الرقيق;

حجم الخط: 14 بكسل;

}

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

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

سؤال وجواب

كيف يمكنني تكبير صورة عندما تحوم فوق المؤشر باستخدام المغلق?

من أجل تكبير الصورة عند تحريك المؤشر باستخدام كس ، يمكنك استخدام خاصية التحويل والطبقة الزائفة:تحوم. على سبيل المثال ، يمكنك تعيين قيمة المقياس(1.1) لخاصية التحويل عند تحريك المؤشر فوق صورة. يمكنك أيضا تعيين خاصية الانتقال لتكبير الصورة بسلاسة.

هل من الممكن استخدام هذه الطريقة لتكبير العناصر الأخرى?

نعم ، يمكنك استخدام هذه الطريقة لتكبير العناصر الأخرى ، وليس الصور فقط. للقيام بذلك ، قم بتطبيق خاصية التحويل على العنصر المطلوب وقم بتعيين القيمة المطلوبة عند تحريك المؤشر. على سبيل المثال ، يمكنك زيادة حجم زر أو كتلة أو نص.

هل من الممكن تعيين التكبير مختلفة لعناصر مختلفة?

نعم ، يمكنك تعيين تكبير مختلف لعناصر مختلفة عند تحريك المؤشر. للقيام بذلك ، تحتاج إلى تطبيق قيم مختلفة لخاصية التحويل على كل عنصر ، أو استخدام فئات أو معرفات مختلفة لكل عنصر وتعيين أنماط مختلفة في كس. على سبيل المثال ، يمكنك تكبير صورة واحدة بنسبة 10 ٪ وآخر بنسبة 20٪.