Single Element Loaders: กำลัง 3 มิติ!

สำหรับบทความที่สี่และสุดท้ายของเรา ชุดเล็ก ๆ บนรถตักแบบองค์ประกอบเดียวเราจะสำรวจรูปแบบ 3 มิติ เมื่อสร้างองค์ประกอบ 3 มิติ เป็นเรื่องยากที่จะจินตนาการว่าองค์ประกอบ HTML เพียงองค์ประกอบเดียวก็เพียงพอแล้วที่จะจำลองบางสิ่งที่คล้ายกับใบหน้าทั้งหกของลูกบาศก์ แต่บางทีเราอาจหนีไปกับสิ่งที่มากกว่านั้น-กดไลก์ แทนที่จะแสดงเฉพาะด้านหน้าสามด้านของรูปร่าง — เป็นไปได้โดยสิ้นเชิง และนั่นคือสิ่งที่เราจะทำร่วมกัน

ตัวโหลดคิวบ์แบบแยกส่วน

นี่คือตัวโหลด 3 มิติที่ลูกบาศก์ถูกแบ่งออกเป็นสองส่วน แต่สร้างขึ้นด้วยองค์ประกอบเดียวเท่านั้น:

ลูกบาศก์แต่ละครึ่งถูกสร้างขึ้นโดยใช้องค์ประกอบหลอก:

เจ๋งใช่มั้ยล่ะ! เราสามารถใช้การไล่ระดับสีรูปกรวยกับ CSS clip-path บนองค์ประกอบ ::before และ ::after หลอกเพื่อจำลองใบหน้าที่มองเห็นได้ทั้งสามของลูกบาศก์ 3 มิติ ระยะขอบเชิงลบคือสิ่งที่ดึงสองหลอกมารวมกันเพื่อทับซ้อนและจำลองลูกบาศก์เต็ม งานที่เหลือของเราส่วนใหญ่เป็นการสร้างแอนิเมชั่นทั้งสองครึ่งเพื่อให้ได้รถตักที่ดูเรียบร้อย!

ลองดูภาพที่อธิบายคณิตศาสตร์ที่อยู่เบื้องหลังจุดคลิปพาธที่ใช้ในการสร้างองค์ประกอบที่มีลักษณะคล้ายลูกบาศก์นี้:

เรามีตัวแปรและสมการแล้ว ลองใช้มันกัน อันดับแรก เราจะสร้างตัวแปรของเราและกำหนดขนาดของ main .loader ธาตุ:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

ไม่มีอะไรบ้าเกินไปเพื่อให้ห่างไกล เรามี 150px สี่เหลี่ยมที่ตั้งขึ้นเป็นภาชนะที่ยืดหยุ่นได้ ตอนนี้เราสร้าง pseudos ของเรา:

.loader::before,
.loader::after { content: ""; flex: 1;
}

นั่นคือสองส่วนใน .loader คอนเทนเนอร์. เราจำเป็นต้องทาสีมัน นั่นคือที่ของเรา การไล่ระดับสีแบบกรวย เตะเข้า:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

ความลาดชันอยู่ที่นั่น แต่ มันดูแปลกๆ. เราจำเป็นต้อง คลิปไปที่องค์ประกอบ:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

ตรวจสอบให้แน่ใจว่าทั้งสองส่วนทับซ้อนกับ a ระยะขอบติดลบ:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

ตอนนี้มาทำให้พวกเขาเคลื่อนไหวกันเถอะ!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

นี่คือตัวอย่างสุดท้ายอีกครั้ง:

ตัวโหลดคิวบ์ความคืบหน้า

ลองใช้เทคนิคเดียวกันนี้เพื่อสร้างตัวโหลดความคืบหน้า 3 มิติ ใช่ มีเพียงองค์ประกอบเดียวเท่านั้น!

เราไม่ได้เปลี่ยนแปลงสิ่งใดในการจำลองลูกบาศก์แบบเดียวกับที่เราทำก่อนหน้านี้ นอกเหนือจากการเปลี่ยนความสูงและอัตราส่วนกว้างยาวของตัวโหลด แอนิเมชั่นที่เราสร้างขึ้นนั้นอาศัยเทคนิคที่ง่ายอย่างน่าประหลาดใจ ซึ่งเราอัปเดตความกว้างของด้านซ้ายในขณะที่ด้านขวาจะเติมพื้นที่ที่เหลือ flex-grow: 1.

ขั้นตอนแรกคือการเพิ่มความโปร่งใสทางด้านขวาโดยใช้ opacity:

นี่เป็นการจำลองเอฟเฟกต์ที่ด้านหนึ่งของคิวบ์ถูกเติมในขณะที่อีกด้านหนึ่งว่างเปล่า จากนั้นเราอัปเดตสีของด้านซ้าย ในการทำเช่นนั้น เราอัปเดตสามสีภายในการไล่ระดับสีแบบกรวยหรือทำโดยการเพิ่มสีพื้นหลังด้วย a background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

เคล็ดลับนี้ช่วยให้เราอัปเดตสีได้เพียงครั้งเดียวเท่านั้น ด้านขวาของตัวโหลดกลมกลืนกับเฉดสีขาวสามเฉดจากการไล่ระดับสีแบบกรวยเพื่อสร้างเฉดสีใหม่สามเฉดของเรา แม้ว่าเราจะใช้ค่าสีเพียงค่าเดียวก็ตาม กลอุบายสี!

มาทำให้ความกว้างของด้านซ้ายของตัวโหลดเคลื่อนไหวกันเถอะ:

อ๊ะ ตอนแรกแอนิเมชั่นค่อนข้างแปลก! สังเกตว่ามันเริ่มต้นนอกคิวบ์อย่างไร? นี่เป็นเพราะว่าเรากำลังเริ่มแอนิเมชั่นที่ 0% ความกว้าง. แต่เนื่องจาก clip-path และระยะขอบติดลบที่เราใช้อยู่ สิ่งที่เราต้องทำแทนคือเริ่มจาก --_d ตัวแปรที่เราใช้ในการนิยาม clip-path คะแนนและระยะขอบติดลบ:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

ดีกว่าเล็กน้อย:

แต่เราสามารถทำให้แอนิเมชั่นนี้ลื่นไหลยิ่งขึ้น คุณสังเกตเห็นว่าเราขาดอะไรเล็กน้อย? ให้ฉันแสดงภาพหน้าจอให้คุณดูเพื่อเปรียบเทียบว่าการสาธิตขั้นสุดท้ายควรมีลักษณะอย่างไรกับตัวอย่างล่าสุด:

มันคือใบหน้าด้านล่างของลูกบาศก์! เนื่องจากองค์ประกอบที่สองมีความโปร่งใส เราจึงต้องเห็นด้านล่างของสี่เหลี่ยมผืนผ้าดังที่คุณเห็นในตัวอย่างด้านซ้าย เรียบๆแต่ควรมี!

เราสามารถเพิ่มการไล่ระดับสีให้กับองค์ประกอบหลักและตัดมันเหมือนที่เราทำกับหลอก:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

นี่คือรหัสเต็มเมื่อทุกอย่างถูกดึงเข้าด้วยกัน:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

แค่นั้นแหละ! เราเพิ่งใช้เทคนิคอันชาญฉลาดที่ใช้องค์ประกอบหลอก การไล่ระดับสีรูปกรวย การตัด การผสมพื้นหลัง และระยะขอบเชิงลบเพื่อให้ได้ สอง ตัวโหลด 3D ที่ดูน่ารักไม่มีอะไรมากไปกว่าองค์ประกอบเดียวในมาร์กอัป

3D เพิ่มเติม

เรายังสามารถไปได้ไกลกว่านั้นและจำลองลูกบาศก์ 3 มิติจำนวนอนันต์โดยใช้องค์ประกอบเดียว ใช่ เป็นไปได้! นี่คือตารางลูกบาศก์:

การสาธิตนี้และการสาธิตต่อไปนี้ไม่ได้รับการสนับสนุนใน Safari ในขณะที่เขียน

บ้าใช่มั้ย? ตอนนี้เรากำลังสร้างรูปแบบซ้ำของลูกบาศก์ที่สร้างขึ้นโดยใช้องค์ประกอบเดียว… และไม่มีการหลอกด้วย! ฉันจะไม่ลงรายละเอียดเกี่ยวกับคณิตศาสตร์ที่เราใช้อยู่ (มีตัวเลขที่เฉพาะเจาะจงมากในนั้น) แต่นี่เป็นตัวเลขที่แสดงให้เห็นว่าเรามาที่นี่ได้อย่างไร:

ก่อนอื่นเราใช้ a conic-gradient เพื่อสร้างรูปแบบลูกบาศก์ซ้ำ การทำซ้ำของรูปแบบถูกควบคุมโดยตัวแปรสามตัว:

• --size: ตามชื่อจริง วิธีนี้ควบคุมขนาดของแต่ละคิวบ์
• --m: นี่แสดงถึงจำนวนคอลัมน์
• --n: นี่คือจำนวนแถว
• --gap: นี่คือช่องว่างหรือระยะห่างระหว่างลูกบาศก์

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

จากนั้นเราใช้เลเยอร์มาสก์โดยใช้รูปแบบอื่นที่มีขนาดเท่ากัน นี่เป็นส่วนที่ยากที่สุดของแนวคิดนี้ การใช้ a . ร่วมกัน linear-gradient และ conic-gradient เราจะตัดบางส่วนขององค์ประกอบของเราเพื่อให้มองเห็นเฉพาะรูปทรงลูกบาศก์เท่านั้น

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

โค้ดอาจดูซับซ้อนเล็กน้อย แต่ต้องขอบคุณตัวแปร CSS ที่เราต้องทำคืออัปเดตค่าสองสามค่าเพื่อควบคุมเมทริกซ์ลูกบาศก์ของเรา ต้องการกริด 10⨉10 หรือไม่? อัพเดท --m และ --n ตัวแปรถึง 10. ต้องการช่องว่างที่กว้างขึ้นระหว่างคิวบ์หรือไม่? อัพเดท --gap ค่า. ค่าสีจะใช้เพียงครั้งเดียว ดังนั้นให้อัปเดตค่าสำหรับจานสีใหม่!

ตอนนี้เรามีเทคนิค 3D อื่นแล้ว ลองใช้มันเพื่อสร้างรูปแบบต่างๆ ของตัวโหลดโดยเล่นกับแอนิเมชั่นต่างๆ ตัวอย่างเช่น แล้วรูปแบบการทำซ้ำของลูกบาศก์ที่เลื่อนไปเรื่อย ๆ จากซ้ายไปขวาเป็นอย่างไร?

ตัวโหลดนี้กำหนดสี่คิวบ์ในแถวเดียว นั่นหมายถึง .ของเรา --n มูลค่าคือ 4 และ --m เท่ากับ 1 . กล่าวอีกนัยหนึ่งเราไม่ต้องการสิ่งเหล่านี้อีกต่อไป!

แต่เราสามารถทำงานร่วมกับ --size และ --gap ตัวแปรในคอนเทนเนอร์กริด:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

นี่คือภาชนะของเรา เรามีลูกบาศก์สี่ลูก แต่ต้องการแสดงเพียงสามลูกในภาชนะในแต่ละครั้ง เพื่อที่เราจะได้ลูกหนึ่งเลื่อนเข้าไปในขณะที่ลูกหนึ่งกำลังเลื่อนออก นั่นเป็นเหตุผลที่เรากำลังแยกความกว้างด้วย 3 และตั้งค่าอัตราส่วนภาพเป็น 3 เช่นกัน

ตรวจสอบให้แน่ใจว่ารูปแบบลูกบาศก์ของเราได้รับการตั้งค่าสำหรับความกว้างสี่ลูกบาศก์ เรากำลังจะทำสิ่งนี้บนคอนเทนเนอร์ของ ::before องค์ประกอบหลอก:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

ตอนนี้เรามีลูกบาศก์สี่ลูกบาศก์ในคอนเทนเนอร์สามลูกบาศก์แล้ว เราสามารถปรับรูปแบบลูกบาศก์ที่ส่วนท้ายของคอนเทนเนอร์กริดเพื่อโอเวอร์โฟลว์ได้ โดยแสดงสามลูกบาศก์สุดท้าย:

.loader { /* same as before */ justify-content: end;
}

นี่คือสิ่งที่เรามีจนถึงตอนนี้ โดยมีโครงร่างสีแดงเพื่อแสดงขอบเขตของคอนเทนเนอร์กริด:

ตอนนี้ สิ่งที่เราต้องทำคือย้ายองค์ประกอบหลอกไปทางขวาโดยเพิ่มแอนิเมชั่นของเรา:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

คุณได้รับเคล็ดลับของแอนิเมชั่นหรือไม่? มาปิดท้ายด้วยการซ่อนรูปแบบคิวบ์ที่ล้นและเพิ่มการมาสก์เพื่อสร้างเอฟเฟกต์การซีดจางที่จุดเริ่มต้นและจุดสิ้นสุด:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

เราสามารถทำให้สิ่งนี้มีความยืดหยุ่นมากขึ้นโดยการแนะนำตัวแปร --nเพื่อกำหนดจำนวนลูกบาศก์ที่จะแสดงในคอนเทนเนอร์พร้อมกัน และเนื่องจากจำนวนลูกบาศก์ทั้งหมดในรูปแบบควรมากกว่า --nเราสามารถแสดงว่าเป็น calc(var(--n) + 1).

นี่คือสิ่งที่เต็ม:

ตกลง ตัวโหลด 3D อีกตัวที่คล้ายคลึงกัน แต่มีลูกบาศก์ที่เปลี่ยนสีตามลำดับแทนที่จะเลื่อน:

เราจะใช้พื้นหลังแบบเคลื่อนไหวด้วย background-blend-mode สำหรับอันนี้:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

ฉันได้ลบโค้ดฟุ่มเฟือยที่ใช้สร้างเลย์เอาต์เดียวกันกับตัวอย่างที่แล้ว แต่มีลูกบาศก์สามลูกแทนที่จะเป็นสี่อัน สิ่งที่ฉันเพิ่มที่นี่คือการไล่ระดับสีที่กำหนดด้วยสีเฉพาะที่ผสมผสานกับการไล่ระดับสีแบบกรวย เช่นเดียวกับที่เราทำก่อนหน้านี้สำหรับตัวโหลด 3D ของแถบความคืบหน้า

จากนั้นจะเป็นการสร้างภาพเคลื่อนไหวการไล่ระดับสีพื้นหลังของ background-position เป็นแอนิเมชั่นสามขั้นตอนเพื่อทำให้ลูกบาศก์กะพริบสีทีละอัน

หากคุณไม่คุ้นเคยกับค่าที่ฉันใช้สำหรับ background-position และไวยากรณ์พื้นหลัง ฉันขอแนะนำ หนึ่งในบทความก่อนหน้าของฉัน และหนึ่งในนั้น คำตอบ Stack Overflow ของฉัน. คุณจะพบคำอธิบายโดยละเอียดที่นั่น

เราสามารถอัปเดตจำนวนคิวบ์เพื่อทำให้เป็นตัวแปรได้หรือไม่?

ใช่ ฉันมี ทางออกสำหรับสิ่งนั้นแต่ฉันอยากให้คุณลองคิดดู แทนที่จะฝังไว้ที่นี่ ใช้สิ่งที่เราได้เรียนรู้จากตัวอย่างก่อนหน้านี้และลองทำแบบเดียวกันกับตัวอย่างนี้ จากนั้นแบ่งปันงานของคุณในความคิดเห็น!

หลากหลายรูปแบบ!

เช่นเดียวกับบทความอื่นๆ อีกสามบทความในชุดนี้ ฉันอยากจะฝากแรงบันดาลใจให้คุณออกไปสร้างรถตักของคุณเอง นี่คือคอลเล็กชันที่รวมตัวโหลด 3 มิติที่เราทำร่วมกัน และอีกสองสามตัวเพื่อให้จินตนาการของคุณดำเนินต่อไป:

นั่นมันห่อ

ฉันหวังว่าคุณจะสนุกกับการใช้เวลาสร้างตัวโหลดองค์ประกอบเดียวกับฉันในช่วงสองสามสัปดาห์ที่ผ่านมา มันบ้ามากที่เราเริ่มต้นด้วยสปินเนอร์ที่ดูเหมือนง่าย ๆ แล้วค่อยเพิ่มชิ้นส่วนใหม่เพื่อทำงานเองจนถึงเทคนิค 3 มิติที่ยังคงใช้องค์ประกอบเดียวในมาร์กอัป นี่คือสิ่งที่ CSS ดูเหมือนเมื่อเราใช้ประโยชน์จากพลังของมัน: ปรับขนาดได้ ยืดหยุ่น และนำกลับมาใช้ใหม่ได้

ขอขอบคุณอีกครั้งที่อ่านซีรี่ส์เล็ก ๆ นี้! ฉันจะออกจากระบบโดยเตือนคุณว่าฉันมี รวบรวมรถตักมากกว่า 500 คัน หากคุณกำลังมองหาแนวคิดและแรงบันดาลใจเพิ่มเติม

---

Single Element Loaders: กำลัง 3 มิติ! เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://css-tricks.com/single-element-loaders-going-3d/