استخدم CSS لتحقيق تأثير المنظور
خطرت لي اليوم فكرة لاستخدام CSS لتحقيق تأثير المنظور. في البداية، فكرت في طريقتنا الشائعة لإضافة تأثيرات الظل، والتي يتم تحقيقها باستخدام عناصر div متعددة من خلال الإزاحة، لكن هذا يتطلب العديد من div، وهو ليس مثاليًا. ثم فكرت في خاصية CSS: الحدود، والتي يمكن أن تنتج تأثيرًا قطريًا عند تقاطع الحدود. يمكن تحقيق ذلك باستخدام قسمين، فلنلقي نظرة على التأثير النهائي أولاً، ثم نحلل عملية التنفيذ.
أولاً، دعونا نلقي نظرة على كيفية قيام الحدود بإنشاء التأثير القطري. أضف الكود التالي إلى رأس HTML الخاص بك وسترى مثل هذا التأثير.
.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}
مع الأساس المذكور أعلاه، يمكننا استخدام قسمين إضافيين لتحقيق تأثير المنظور.
1. كود HTML هو كما يلي :
<div class="المنظور الخارجي">
<div class="perspective-r"></div>
<div class="perspective-b"></div>
<div class="perspective-inner">عنصر تأثير المنظور</div>
</div>
2. كود CSS:
.المنظور الخارجي{
الموقف:نسبي؛
width:170px;/*عرض العنصر لتحقيق تأثير المنظور + مسافة المنظور*/
height:140px;/*ارتفاع العنصر لتحقيق تأثير المنظور + مسافة المنظور*/
}
.المنظور الداخلي{
الحدود: 1 بكسل الصلبة #f60؛
الارتفاع: 118 بكسل؛
العرض: 148 بكسل؛
لون الخلفية:#fff;
}
.المنظور ص،
.المنظور-ب{
الموقف:مطلق؛
العرض: 0؛
الارتفاع: 0؛
}
.المنظور ص {
حق:0؛
height:100px;/*ارتفاع العنصر لتحقيق تأثير المنظور (120px) - (border-top:20px)*/
Border-left:20px Solid #000;/*مسافة المنظور الأيمن*/
الحد العلوي: 20 بكسل صلب #fff;/*مسافة المنظور أدناه*/
}
.المنظور-ب{
أسفل:0؛
width:150px;/*عرض العنصر الخارجي (170px) - الحد الأيسر*/
الحدود اليسرى: 20 بكسل الصلبة #fff؛
الحدود العلوية: 20 بكسل صلب #000؛
}
يحدد .perspective-outer الارتفاع والعرض ويضعهما نسبيًا لضمان إمكانية وضع مناطق المنظور على اليمين والأسفل في المواضع المقابلة، وقيم الارتفاع والعرض هي ارتفاع العنصر لتحقيق المنظور التأثير بالإضافة إلى مسافة المنظور المقابلة. .perspective-r يحتاج فقط إلى تعيين قيمة الارتفاع، وقيمته هي ارتفاع .perspective-outer ناقص border-top. .perspective-b يحتاج فقط إلى تعيين قيمة العرض، وقيمته هي عرض .perspective-. الخارجي ناقص الحدود اليسرى. تحدد قيم عرض الحد العلوي لـ .perspective-r والحدود اليسرى لـ .perspective-b زاوية المنظور. تحدد قيم العرض لـ border-left لـ .perspective-r و border-top لـ .perspective-b مسافة المنظور. من بينها، لون الحد العلوي لـ .perspective-r والحدود اليسرى لـ .perspective-b هو لون خلفية العنصر الأصلي. العنصر الأصلي لصفحة الاختبار الخاصة بي هنا هو الجسم، لذا فهو أبيض.
3. حاشية
هذه المقالة مجرد اختبار بسيط، والغرض منها هو إلهام الآخرين. لا يهمنا مدى فعالية هذه الطريقة، لكنها على الأقل يمكن أن تعطينا طريقة لحل المشكلة. نأمل أن تكون هذه المقالة مفيدة لك.