Πώς να Animate Dashed Border με CSS

Τα διακοσμημένα σύνορα μπορούν να κοσμούν οποιοδήποτε στοιχείο στη σελίδα, αλλά τα όρια CSS είναι περιορισμένα όταν πρόκειται για στυλ. Οι προγραμματιστές συχνά βρίσκουν λύσεις όπως τα σύνορα CSS-gradient, τα σύνορα SVG, πολλά σύνορα και πολλά άλλα για να μιμηθούν και να αναβαθμίσουν την εμφάνιση των πλαισίων των κιβωτίων και των κινουμένων σχεδίων.

Σήμερα θα εξετάσουμε ένα απλούστερο hack για διακεκομμένα σύνορα: διακεκομμένη κινούμενη εικόνα των συνόρων. Το κινούμενο διακεκομμένο όριο θα δημιουργηθεί μόνο με χρήση περίγραμμα και κουτί-σκιά, δεν αφήνει καμία αναστάτωση σχετικά με τα εφεδρικά, από τότε περίγραμμα υποστηρίζεται από το IE8 και μετά. Με αυτόν τον τρόπο, ο χρήστης θα εξακολουθήσει να βλέπει τα σύνορα αντίθετα από τη χρήση SVG ή κλίσης. Με αυτό μπορείτε επίσης να δημιουργήσετε δίχρωμες παύλες. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.

Δημιουργία των συνόρων

Θα δημιουργήσουμε πρώτα τα σύνορα. Για αυτό, θα χρησιμοποιήσουμε ένα διακεκομμένο περίγραμμα και μια σκιά κουτιού.

 .πανό περίγραμμα: 6px κίτρινο; κουτί-σκιά: 0 0 0 6px # EA3556; ... 

ο περίγραμμα θα χρειαστούν όλες τις αξίες του. το πλάτος, τον τύπο και το χρώμα. ο κουτί-σκιά χρειάζεται μόνο την τιμή για διάδοση που θα πρέπει να είναι το ίδιο με το πλάτος του περιγράμματος και το χρώμα του. Τόσο το περίγραμμα όσο και η σκιά κουτιού μαζί θα δημιουργήσουν το αποτέλεσμα διπλών χρωμάτων.

Στη συνέχεια, μπορείτε να ρυθμίσετε το πλάτος ή το ύψος του κιβωτίου για το επιθυμητό όριο των γωνιών σας στις γωνίες.

Κινώντας τα σύνορα

Για το πρώτο παράδειγμα κινούμενης εικόνας, θα προσθέσουμε κινούμενα σχέδια CSS σε ένα σύνολο banners με τα σύνορα να κινούνται συνεχώς, κερδίζοντας την προσοχή. Για το εφέ κίνησης θα αλλάξουμε απλά τα χρώματα του περιγράμματος και της σκιάς κουτιού.

@keyframes animateBorder to outline-color: # EA3556; κουτί-σκιά: 0 0 0 6px κίτρινο? 

Μπορείτε να στοχεύσετε το χρώμα του περιγράμματος χρησιμοποιώντας περίγραμμα-χρώμα longhand property, ωστόσο για σκιά κιβωτίων θα πρέπει να δώσετε όλες τις αξίες για την ιδιότητα shorthand για τώρα.

Μόλις η κινούμενη εικόνα είναι έτοιμη, προσθέστε την στο κουτί.

.πανό περίγραμμα: 6px κίτρινο; κουτί-σκιά: 0 0 0 6px # EA3556; κινούμενο: 1s animateBorder άπειρο, ...

Μεταβάσεις στα σύνορα

Για το παράδειγμα μετάβασης θα προσθέσουμε σύνορα σε εικόνες και θα ζωντανέψουμε τα στοιχεία που βρίσκονται πάνω στην αιώρα. Μπορείτε επίσης να αλλάξετε το μέγεθος των συνόρων για διαφορετικά εφέ.

.φωτογραφίες περίγραμμα: 20px dashed # 006DB5; κουτί-σκιά: 0px 0px 0px 20px # 3CFDD3; μετάβαση: όλα 1 δευτερόλεπτα, ... .photos: σμίκρυνση περίγραμμα-χρώμα: # 3CFDD3; κουτί-σκιά: 0 0 0 20px # 006DB5; 

Τώρα, τοποθετήστε το δείκτη του ποντικιού πάνω από αυτές τις εικόνες για να δείτε τα συνωστισμένα σύνορά σας CSS σε όλη του τη ζωηρή δόξα.

Και, αυτό είναι ένα περιτύλιγμα. Μπορείτε να δοκιμάσετε να αντικαταστήσετε τα διακεκομμένα σύνορα με διακεκομμένα, αλλά το αποτέλεσμα μπορεί να μην είναι τόσο καλό. Μπορείτε επίσης να αλλάξετε τον τύπο του περιγράμματος κατά τη διάρκεια της κινούμενης εικόνας για μερικά ακόμα εφέ.