Máy nạp nguyên tố đơn: Phát triển 3D!

Đối với bài viết thứ tư và cuối cùng của chúng tôi loạt bài nhỏ về bộ tải một phần tử, chúng ta sẽ khám phá các mẫu 3D. Khi tạo một phần tử 3D, thật khó để tưởng tượng rằng chỉ một phần tử HTML là đủ để mô phỏng thứ gì đó giống như cả sáu mặt của một khối lập phương. Nhưng có lẽ chúng ta có thể thoát khỏi thứ gì đó hình khối hơn-Lượt thích thay vào đó bằng cách chỉ hiển thị ba cạnh phía trước của hình - điều đó hoàn toàn có thể thực hiện được và đó là những gì chúng ta sẽ cùng nhau thực hiện.

Bộ nạp khối chia đôi

Đây là trình tải 3D trong đó khối lập phương được chia thành hai phần nhưng chỉ được tạo bằng một phần tử duy nhất:

Mỗi nửa khối được tạo bằng phần tử giả:

Thật tuyệt phải không?! Chúng ta có thể sử dụng gradient hình nón với CSS clip-path trên phần tử ::before và ::after pseudos để mô phỏng ba mặt nhìn thấy được của khối lập phương 3D. Lề âm là thứ kéo hai giả lại với nhau để chồng lên nhau và mô phỏng một khối đầy đủ. Phần còn lại của công việc của chúng ta chủ yếu là tạo hoạt ảnh cho hai nửa đó để có được các bộ tải trông gọn gàng hơn!

Chúng ta hãy xem hình ảnh giải thích phép toán đằng sau các điểm đường cắt được sử dụng để tạo phần tử giống khối lập phương này:

Chúng ta có các biến số và một phương trình, vì vậy hãy áp dụng chúng. Đầu tiên, chúng ta sẽ thiết lập các biến và đặt kích thước cho phần chính .loader thành phần:

.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;
}

Không có gì quá điên rồ cho đến nay. Chúng ta có một 150px hình vuông được thiết lập như một vùng chứa linh hoạt. Bây giờ chúng tôi thiết lập giả của mình:

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

Đó là hai nửa trong .loader thùng đựng hàng. Chúng ta cần tô chúng vào, vì vậy đó là nơi chúng ta gradient conic đá vào:

.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);
}

Độ dốc có ở đó, nhưng Nó trông kỳ quặc. Chúng ta cần phải kẹp nó vào phần tử:

.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));
}

Hãy đảm bảo hai nửa chồng lên nhau bằng một biên độ âm:

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

Bây giờ chúng ta hãy làm cho họ di chuyển!

.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)) }
}

Đây là bản demo cuối cùng một lần nữa:

Trình tải khối tiến trình

Hãy sử dụng kỹ thuật tương tự để tạo trình tải tiến trình 3D. Vâng, vẫn chỉ có một yếu tố!

Chúng tôi sẽ không thay đổi bất kỳ điều gì ngoại trừ việc mô phỏng khối lập phương giống như cách chúng tôi đã làm trước đây, ngoài việc thay đổi chiều cao và tỷ lệ khung hình của trình tải. Hoạt ảnh mà chúng tôi đang thực hiện dựa trên một kỹ thuật dễ dàng đến bất ngờ, trong đó chúng tôi cập nhật chiều rộng của cạnh trái trong khi cạnh phải lấp đầy khoảng trống còn lại, nhờ vào flex-grow: 1.

Bước đầu tiên là thêm một chút độ trong suốt vào phía bên phải bằng cách sử dụng opacity:

Điều này mô phỏng hiệu ứng một mặt của khối lập phương được lấp đầy trong khi mặt kia trống rỗng. Sau đó, chúng tôi cập nhật màu sắc của phía bên trái. Để làm điều đó, chúng tôi cập nhật ba màu bên trong gradient hình nón hoặc chúng tôi thực hiện bằng cách thêm màu nền có background-blend-mode:

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

Thủ thuật này chỉ cho phép chúng ta cập nhật màu một lần duy nhất. Phía bên phải của trình tải hòa trộn với ba sắc thái màu trắng từ gradient hình nón để tạo ra ba sắc thái màu mới của chúng ta, mặc dù chúng ta chỉ sử dụng một giá trị màu. Trò lừa màu!

Hãy tạo hiệu ứng cho chiều rộng của phía bên trái của trình tải:

Rất tiếc, hoạt ảnh lúc đầu hơi lạ! Chú ý cách nó bắt đầu bên ngoài khối lập phương? Điều này là do chúng tôi đang bắt đầu hoạt ảnh ở 0% chiều rộng. Nhưng do clip-path và biên độ âm mà chúng tôi đang sử dụng, thay vào đó, điều chúng tôi cần làm là bắt đầu từ --_d biến mà chúng ta đã sử dụng để xác định clip-path điểm và biên độ âm:

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

Điều đó tốt hơn một chút:

Nhưng chúng ta có thể làm cho hoạt ảnh này mượt mà hơn nữa. Bạn có nhận thấy chúng ta đang thiếu một chút gì đó không? Hãy để tôi cho bạn xem ảnh chụp màn hình để so sánh bản demo cuối cùng sẽ trông như thế nào với bản demo cuối cùng đó:

Đó là mặt dưới của khối lập phương! Vì phần tử thứ hai trong suốt nên chúng ta cần nhìn thấy mặt dưới của hình chữ nhật đó như bạn có thể thấy trong ví dụ bên trái. Nó tinh tế, nhưng nên có!

Chúng ta có thể thêm gradient vào phần tử chính và cắt nó giống như chúng ta đã làm với các bút giả:

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

Đây là mã đầy đủ khi mọi thứ được tập hợp lại với nhau:

.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%; }
}

Đó là nó! Chúng tôi vừa sử dụng một kỹ thuật thông minh sử dụng các phần tử giả, chuyển màu hình nón, cắt bớt, trộn nền và lề âm để có được, không phải một, mà là hai các trình tải 3D trông đẹp mắt không có gì khác ngoài một phần tử duy nhất trong phần đánh dấu.

Thêm 3D

Chúng ta vẫn có thể tiến xa hơn và mô phỏng vô số hình khối 3D bằng cách sử dụng một phần tử - vâng, điều đó là có thể! Đây là một mạng lưới các hình khối:

Bản demo này và các bản demo sau không được hỗ trợ trong Safari tại thời điểm viết bài.

Điên rồi phải không? Bây giờ chúng ta đang tạo một mẫu hình khối lặp đi lặp lại được tạo bằng cách sử dụng một phần tử duy nhất… và cũng không có hình khối giả! Tôi sẽ không đi sâu vào chi tiết về phép toán mà chúng tôi đang sử dụng (có những con số rất cụ thể trong đó) nhưng đây là hình ảnh để hình dung cách chúng tôi đạt được điều này:

Đầu tiên chúng tôi sử dụng một conic-gradient để tạo ra mẫu hình khối lặp đi lặp lại. Sự lặp lại của mẫu được kiểm soát bởi ba biến:

• --size: Đúng như tên gọi của nó, điều này kiểm soát kích thước của mỗi khối.
• --m: Điều này thể hiện số lượng cột.
• --n: Đây là số hàng.
• --gap: đây là khoảng cách hoặc khoảng cách giữa các hình khối

.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));
}

Sau đó, chúng ta áp dụng một lớp mặt nạ bằng cách sử dụng một mẫu khác có cùng kích thước. Đây là phần khó nhất của ý tưởng này. Sử dụng kết hợp một linear-gradient và conic-gradient chúng ta sẽ cắt một vài phần của phần tử để chỉ giữ lại các hình khối.

.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;
}

Mã có thể trông hơi phức tạp nhưng nhờ các biến CSS, tất cả những gì chúng ta cần làm là cập nhật một vài giá trị để kiểm soát ma trận khối của mình. Cần một lưới 10⨉10? Cập nhật --m và --n biến để 10. Cần một khoảng cách rộng hơn giữa các hình khối? Cập nhật --gap giá trị. Các giá trị màu chỉ được sử dụng một lần, vì vậy hãy cập nhật các giá trị đó cho bảng màu mới!

Bây giờ chúng ta có một kỹ thuật 3D khác, hãy sử dụng nó để xây dựng các biến thể của trình tải bằng cách thử nghiệm với các hoạt ảnh khác nhau. Ví dụ, bạn nghĩ thế nào về mô hình lặp đi lặp lại của các hình khối trượt vô hạn từ trái sang phải?

Trình tải này xác định bốn khối trong một hàng. Điều đó có nghĩa là của chúng tôi --n giá trị là 4 và --m bằng 1 . Nói cách khác, chúng ta không còn cần những thứ này nữa!

Thay vào đó, chúng ta có thể làm việc với --size và --gap các biến trong một thùng chứa lưới:

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

Đây là thùng chứa của chúng tôi. Chúng ta có bốn hình khối, nhưng chỉ muốn hiển thị ba hình khối trong thùng chứa cùng một lúc để chúng ta luôn có một hình trượt vào trong khi một hình trượt ra ngoài. Đó là lý do vì sao chúng tôi tính chiều rộng theo 3 và đặt tỷ lệ khung hình thành 3 là tốt.

Hãy đảm bảo rằng mẫu hình khối của chúng ta được thiết lập cho chiều rộng của bốn hình khối. Chúng ta sẽ thực hiện việc này trên container ::before phần tử giả:

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

Bây giờ chúng ta có bốn hình khối trong một thùng chứa ba khối, chúng ta có thể căn chỉnh mô hình khối ở cuối thùng chứa lưới để tràn nó, hiển thị ba khối cuối cùng:

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

Đây là những gì chúng ta có cho đến nay, với đường viền màu đỏ để hiển thị giới hạn của vùng chứa lưới:

Bây giờ tất cả những gì chúng ta phải làm là di chuyển phần tử giả sang bên phải bằng cách thêm hoạt ảnh của chúng ta:

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

Bạn có hiểu được mẹo hoạt hình không? Hãy hoàn thành việc này bằng cách ẩn mẫu hình khối tràn ra và thêm một chút mặt nạ để tạo hiệu ứng mờ dần ở phần đầu và phần cuối:

.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);
}

Chúng ta có thể làm điều này linh hoạt hơn nhiều bằng cách giới thiệu một biến, --n, để đặt số lượng hình khối được hiển thị trong vùng chứa cùng một lúc. Và vì tổng số hình khối trong mẫu phải nhiều hơn một --n, chúng ta có thể diễn đạt điều đó như calc(var(--n) + 1).

Đây là điều đầy đủ:

Được rồi, một trình tải 3D nữa tương tự nhưng có các hình khối thay đổi màu sắc liên tiếp thay vì trượt:

Chúng ta sẽ dựa vào nền hoạt hình với background-blend-mode cho cái này:

.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%; }
}

Tôi đã loại bỏ mã thừa được sử dụng để tạo bố cục giống như ví dụ trước, nhưng với ba hình khối thay vì bốn. Những gì tôi đang thêm ở đây là một dải màu được xác định bằng một màu cụ thể hòa trộn với dải màu hình nón, giống như chúng tôi đã làm trước đó đối với trình tải 3D của thanh tiến trình.

Từ đó, nó tạo hiệu ứng chuyển màu nền background-position dưới dạng hoạt ảnh ba bước để làm cho các hình khối lần lượt nhấp nháy màu sắc.

Nếu bạn không quen với các giá trị tôi đang sử dụng cho background-position và cú pháp nền, tôi thực sự khuyên bạn nên một trong những bài viết trước đây của tôi và là một trong câu trả lời về Stack Overflow của tôi. Bạn sẽ tìm thấy lời giải thích rất chi tiết ở đó.

Chúng ta có thể cập nhật số khối để biến nó thành các biến không?

Vâng, tôi có một giải pháp cho điều đó, nhưng tôi muốn bạn tìm hiểu nó hơn là nhúng nó vào đây. Hãy lấy những gì chúng ta đã học được từ ví dụ trước và cố gắng làm tương tự với ví dụ này - sau đó chia sẻ tác phẩm của bạn trong phần bình luận!

Có rất nhiều biến thể!

Giống như ba bài viết khác trong loạt bài này, tôi muốn để lại cho bạn một số nguồn cảm hứng để tiếp tục và tạo ra các trình tải của riêng mình. Đây là bộ sưu tập bao gồm các trình tải 3D mà chúng tôi đã cùng nhau tạo ra, cùng với một số trình tải khác để khơi gợi trí tưởng tượng của bạn:

Đó là một bọc

Tôi chắc chắn hy vọng bạn thích dành thời gian cùng tôi tạo các trình tải phần tử đơn trong vài tuần qua. Thật điên rồ khi chúng tôi bắt đầu với công cụ quay vòng có vẻ đơn giản và sau đó dần dần thêm các phần mới để tự phát triển cho đến các kỹ thuật 3D vẫn chỉ sử dụng một yếu tố duy nhất trong đánh dấu. Đây chính xác là CSS trông như thế nào khi chúng ta khai thác sức mạnh của nó: có thể mở rộng, linh hoạt và có thể tái sử dụng.

Cảm ơn một lần nữa vì đã đọc loạt bài nhỏ này! Tôi sẽ đăng xuất bằng cách nhắc nhở bạn rằng tôi có bộ sưu tập của hơn 500 bộ tải nếu bạn đang tìm kiếm thêm ý tưởng và cảm hứng.

---

Máy nạp nguyên tố đơn: Phát triển 3D! ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. TRUY CẬP MIỄN PHÍ.
• CryptoHawk. Radar Altcoin. Dùng thử miễn phí.
• Nguồn: https://css-tricks.com/single-element-loaders-ending-3d/