Γεννήτρια Κινούμενου Διαβαθμισμένου Περιγράμματος CSS

Ένα περιστρεφόμενο περίγραμμα ουράνιου τόξου φαίνεται απλό, μέχρι να προσπαθήσετε πραγματικά να το φτιάξετε σε CSS: η κίνηση μιας γωνίας μέσα σε conic-gradient() με μια απλή custom ιδιότητα δεν κάνει τίποτα χρήσιμο, επειδή ο browser δεν γνωρίζει ότι η τιμή είναι γωνία και δεν μπορεί να παρεμβάλει ομαλά μεταξύ 0deg και 360deg — απλώς μεταπηδά. Αυτή η γεννήτρια χρησιμοποιεί την πραγματική λύση, το CSS Properties and Values API: η δήλωση `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` λέει στον browser ακριβώς τι είδους τιμή περιέχει η custom ιδιότητα, πράγμα που ξεκλειδώνει την ομαλή, επιταχυνόμενη από GPU παρεμβολή μέσω ενός κανόνα @keyframes.

Ο ίδιος ο δακτύλιος είναι ένα ψευδοστοιχείο ::before με διαστάσεις μεγαλύτερες από το κουτί (inset κατά το πάχος του περιγράμματος) και το φόντο του έχει οριστεί ως `conic-gradient(from var(--border-angle), ...)` που επιστρέφει στο πρώτο χρώμα ώστε η σάρωση να μην έχει ορατή ένωση. Στη συνέχεια, μια μάσκα κάνει την πραγματική διαμόρφωση: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` διατηρεί μόνο τη διαφορά σχήματος δακτυλίου μεταξύ του padding-box και του content-box, απορρίπτοντας το συμπαγές ορθογώνιο ντεγκραντέ παντού αλλού. Η παλαιότερη εντολή `-webkit-mask-composite: xor` του Safari εκτελεί την ίδια λειτουργία και αποστέλλεται μαζί με την τυπική ιδιότητα, έτσι ώστε το εφέ να αποδίδεται με συνέπεια αντί να αποτυγχάνει σιωπηλά σε μία μηχανή.

Η υποστήριξη του border-radius δεν είναι εκ των υστέρων προσθήκη — η ιδιότητα `border-radius: inherit` του ψευδοστοιχείου σημαίνει ότι όποια ακτίνα επιλέξετε για το κουτί μεταφέρεται αυτόματα στον δακτύλιο, επομένως ένα κουμπί σε σχήμα χάπι ή μια στρογγυλεμένη κάρτα αποκτά στρογγυλεμένο φωτεινό περίγραμμα αντί για ευθείες ακμές που ξεχειλώνουν από καμπύλες γωνίες. Δοκιμάστε το ζωντανά: σύρετε το ρυθμιστικό ακτίνας από ένα αιχμηρό ορθογώνιο σε ένα πλήρες χάπι και παρακολουθήστε τον δακτύλιο να ακολουθεί το σχήμα σε κάθε βήμα — αυτή είναι η λεπτομέρεια που διαχωρίζει μια πραγματική υλοποίηση αυτής της τεχνικής από ένα ψεύτικο στιγμιότυπο οθόνης.

Όλα τα υπόλοιπα στη σελίδα αντιστοιχούν άμεσα στον παραγόμενο κώδικα: το ρυθμιστικό πάχους είναι το πάχος του δακτυλίου και το inset/padding του ψευδοστοιχείου, το ρυθμιστικό διάρκειας είναι το animation-duration των @keyframes, ο διακόπτης φοράς απλώς αντιστρέφει το πρόσημο της τελικής γωνίας των keyframes (+360deg ή -360deg) και κάθε χρωματική στάση είναι μια καταχώρηση διαχωρισμένη με κόμμα μέσα στην κλήση της conic-gradient(). Το όλο πράγμα εκτελείται στον browser σας χωρίς εικόνες, χωρίς βρόγχο κίνησης βασισμένο σε JavaScript και χωρίς εξωτερικές υπηρεσίες — αντιγράψτε το μπλοκ CSS και συνεχίζει να περιστρέφεται όπου κι αν το επικολλήσετε.