ใช้ css เพื่อให้ได้เอฟเฟกต์เปอร์สเปคทีฟ
วันนี้ฉันมีแนวคิดที่จะใช้ CSS เพื่อให้ได้เอฟเฟ็กต์เปอร์สเปคทีฟ ในตอนแรก ฉันคิดว่าวิธีการทั่วไปในการเพิ่มเอฟเฟ็กต์เงา ซึ่งสามารถทำได้โดยการใช้ div หลายตัวผ่านออฟเซ็ต แต่วิธีนี้ต้องใช้ div จำนวนมาก ซึ่งไม่เหมาะ จากนั้น ฉันนึกถึงคุณสมบัติของ CSS: border ซึ่งสามารถสร้างเอฟเฟกต์แนวทแยงที่จุดเชื่อมต่อของเส้นขอบ ซึ่งสามารถทำได้ด้วยสอง div มาดูผลสุดท้ายก่อนแล้วจึงวิเคราะห์กระบวนการนำไปใช้งาน
ก่อนอื่น เรามาดูกันว่าเส้นขอบสร้างเอฟเฟกต์แนวทแยงอย่างไร เพิ่มโค้ดต่อไปนี้ที่ส่วนหัวของ HTML ของคุณ แล้วคุณจะเห็นเอฟเฟกต์ดังกล่าว
.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}
ด้วยพื้นฐานข้างต้น เราสามารถใช้ div เพิ่มเติมอีกสองรายการเพื่อให้ได้เอฟเฟ็กต์เปอร์สเปคทีฟ
1. รหัส html มีดังนี้ :
<div class="perspective-outer">
<div class="เปอร์สเปคทีฟ-r"></div>
<div class="เปอร์สเปคทีฟ-b"></div>
<div class="perspective-inner">องค์ประกอบเอฟเฟกต์มุมมอง</div>
</div>
2. รหัส CSS:
.perspective-ด้านนอก{
ตำแหน่ง:ญาติ;
width:170px;/*ความกว้างขององค์ประกอบเพื่อให้ได้เอฟเฟ็กต์เปอร์สเปคทีฟ + ระยะเปอร์สเปคทีฟ*/
height:140px;/*ความสูงขององค์ประกอบเพื่อให้ได้เอฟเฟ็กต์เปอร์สเปคทีฟ + ระยะเปอร์สเปคทีฟ*/
-
.perspective-ภายใน{
เส้นขอบ:1px ทึบ #f60;
ความสูง:118px;
ความกว้าง:148px;
สีพื้นหลัง:#fff;
-
.perspective-r,
.เปอร์สเปคทีฟ-ข{
ตำแหน่ง:แน่นอน;
ความกว้าง:0;
ความสูง:0;
-
.เปอร์สเปคทีฟ-r{
ขวา:0;
height:100px;/*ความสูงขององค์ประกอบเพื่อให้ได้เอฟเฟกต์เปอร์สเปคทีฟ (120px) - (border-top:20px)*/
ขอบซ้าย:20px solid #000;/*ระยะมุมมองด้านขวา*/
ขอบบน:20px solid #fff;/*ระยะเปอร์สเปคทีฟด้านล่าง*/
-
.เปอร์สเปคทีฟ-ข{
ด้านล่าง:0;
width:150px;/*ความกว้างขององค์ประกอบด้านนอกสุด (170px) - ขอบซ้าย*/
ขอบซ้าย:20px ทึบ #fff;
ขอบบน:20px ทึบ #000;
-
.perspective-outer กำหนดความสูงและความกว้าง และจัดตำแหน่งให้สัมพันธ์กันเพื่อให้แน่ใจว่าพื้นที่เปอร์สเปคทีฟทางด้านขวาและด้านล่างสามารถวางในตำแหน่งที่สอดคล้องกันได้ ค่าความสูงและความกว้างคือความสูงขององค์ประกอบเพื่อให้ได้เปอร์สเปคทีฟ เอฟเฟกต์บวกกับระยะเปอร์สเปคทีฟที่สอดคล้องกัน .perspective-r จำเป็นต้องตั้งค่าความสูงเท่านั้น และค่าของมันคือความสูงของ .perspective-outer ลบ border-top ด้านนอกลบขอบ-ซ้าย ค่าความกว้างของ border-top ของ .perspective-r และ border-left ของ .perspective-b จะกำหนดมุมเปอร์สเปคทีฟ ค่าความกว้างของ border-left ของ .perspective-r และ border-top ของ .perspective-b จะกำหนดระยะเปอร์สเปคทีฟ ในบรรดาสีเหล่านั้น สีของ border-top ของ .perspective-r และ border-left ของ .perspective-b คือสีพื้นหลังขององค์ประกอบหลัก
3. คำลงท้าย
บทความนี้เป็นเพียงการทดสอบง่ายๆ โดยมีวัตถุประสงค์เพื่อสร้างแรงบันดาลใจให้ผู้อื่น เราไม่สนใจว่าวิธีนี้จะใช้งานได้จริงเพียงใด แต่อย่างน้อยก็สามารถให้วิธีแก้ปัญหาแก่เราได้ หวังว่าบทความนี้จะเป็นประโยชน์กับคุณ