CSS Animated Gradient Border Generator

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

Το ίδιο το δαχτυλίδι είναι ένα ::before ψευδοστοιχείο με μέγεθος μεγαλύτερο από το πλαίσιο (εισάγεται μείον το πλάτος του περιγράμματος) με το φόντο του ρυθμισμένο σε "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 εκτελεί την ίδια λειτουργία και αποστέλλεται παράλληλα με την τυπική ιδιότητα, επομένως το εφέ αποδίδεται σταθερά αντί να αποτυγχάνει αθόρυβα σε έναν κινητήρα.

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

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