Trình tạo đường viền chuyển động hoạt hình CSS

Đường viền cầu vồng xoay trông có vẻ đơn giản cho đến khi bạn thực sự cố gắng tạo một đường viền trong CSS: tạo hoạt ảnh cho một góc bên trong conic-gradient() bằng thuộc tính tùy chỉnh đơn giản không có ích gì vì trình duyệt không biết giá trị đó là một góc và không thể nội suy giữa 0deg và 360deg — nó chỉ nhảy. Trình tạo này sử dụng bản sửa lỗi thực sự, API Giá trị và Thuộc tính CSS: `@property --border-angle { cú pháp: '<angle>'; giá trị ban đầu: 0deg; kế thừa: sai; }` cho trình duyệt biết chính xác loại giá trị mà thuộc tính tùy chỉnh nắm giữ, đó là giá trị mở ra phép nội suy mượt mà, thân thiện với GPU trên quy tắc @keyframes.

Bản thân chiếc nhẫn là một :: trước phần tử giả có kích thước lớn hơn hộp (được chèn bằng trừ chiều rộng đường viền) với nền của nó được đặt thành `conic-gradient(from var(--border-angle), ...)` lặp lại màu đầu tiên để quá trình quét không có đường nối rõ ràng. Sau đó, một mặt nạ thực hiện công việc tạo hình thực sự: `mask: Linear-gradient(#000 0 0) content-box, Linear-gradient(#000 0 0); mặt nạ-composite: loại trừ;` chỉ giữ lại sự khác biệt hình vòng giữa hộp đệm và hộp nội dung, loại bỏ hình chữ nhật chuyển màu ở mọi nơi khác. `-webkit-mask-composite: xor` cũ hơn của Safari thực hiện thao tác giống hệt nhau và vận chuyển cùng với thuộc tính tiêu chuẩn, do đó hiệu ứng hiển thị nhất quán thay vì bị lỗi âm thầm trên một công cụ.

Hỗ trợ bán kính đường viền không phải là một tính năng được chốt ở trên cùng - `bán kính đường viền: kế thừa` của phần tử giả có nghĩa là bất kỳ bán kính nào bạn quay vào hộp sẽ tự động được đưa vào vòng, do đó, nút hình viên thuốc hoặc thẻ tròn sẽ có đường viền phát sáng tròn thay vì các cạnh thẳng chảy ra từ các góc cong. Kiểm tra trực tiếp: kéo thanh trượt bán kính từ một hình chữ nhật sắc nét đến một viên thuốc đầy đủ và xem chiếc nhẫn đi theo hình dạng ở mỗi bước. Đây là chi tiết phân biệt việc thực hiện kỹ thuật này thực sự với ảnh chụp màn hình giả.

Mọi thứ khác trên trang ánh xạ trực tiếp vào mã được tạo: thanh trượt chiều rộng là độ dày của vòng và phần đệm/phần đệm của phần tử giả, thanh trượt thời lượng là thời lượng hoạt ảnh @keyframes, công tắc hướng chỉ lật dấu của góc cuối của khung hình chính (+360deg hoặc -360deg) và mỗi điểm dừng màu là một mục nhập được phân tách bằng dấu phẩy bên trong lệnh gọi conic-gradient(). Toàn bộ nội dung chạy trong trình duyệt của bạn mà không có hình ảnh, không có vòng lặp hoạt ảnh dựa trên JavaScript và không có dịch vụ bên ngoài - sao chép khối CSS và nó sẽ tiếp tục quay bất cứ nơi nào bạn dán.