Come animare Dashed Border con CSS

I bordi decorati possono adornare qualsiasi elemento sulla pagina, ma i bordi CSS sono limitati quando si tratta di stile. Gli sviluppatori hanno spesso a disposizione soluzioni come bordi sfumati CSS, bordi SVG, bordi multipli e altro ancora per imitare e aggiornare l'aspetto dei bordi della scatola e le sue animazioni.

Oggi esamineremo un trucco più semplice per i bordi tratteggiati: animazione dei bordi tratteggiata. Il bordo tratteggiato animato verrà creato usando solo schema e box-ombra, lasciando senza parole storie di fallimenti, da allora schema è supportato da IE8 in poi. In questo modo l'utente sarà comunque in grado di vedere i bordi a differenza di quando viene utilizzato SVG o gradiente. Con questo puoi anche creare trattini bicolore. Diamo un'occhiata.

Creare i confini

Per prima cosa creeremo i confini. Per questo, utilizzeremo un contorno tratteggiato e un'ombra di riquadro.

 .banner outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; ... 

Il schema avrà bisogno di tutti i suoi valori; larghezza, tipo e colore. Il box-ombra ha solo bisogno del valore per diffusione che dovrebbe essere uguale alla larghezza del contorno e al suo colore. Sia il contorno che l'ombra casella creeranno l'effetto di trattini bicolore.

È quindi possibile regolare la larghezza o l'altezza della casella per l'aspetto del bordo desiderato agli angoli.

Animare i confini

Per il nostro primo esempio di animazione, aggiungeremo animazioni di fotogrammi chiave CSS a una serie di banner con i bordi che si animano in continuazione, attirando l'attenzione. Per l'effetto animazione, scambiamo semplicemente i colori del contorno e dell'ombra del riquadro.

@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px giallo; 

Puoi scegliere come target il colore del contorno usando outline-color proprietà longhand, tuttavia per box shadow dovrai dare tutti i valori alla proprietà shorthand per ora.

Una volta che l'animazione è pronta, aggiungila alla scatola.

.banner outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; animazione: 1s animateBorder infinite; ...

Transitions On The Borders

Per l'esempio di transizione aggiungeremo bordi alle immagini e animeremo quelli al passaggio del mouse. Puoi anche cambiare la dimensione del bordo per effetti diversi.

.foto outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transizione: tutti 1s; ... .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Ora, passa con il mouse su queste immagini per vedere i tuoi bordi tratteggiati CSS in tutta la sua gloria animata.

E questo è un film. Puoi provare a sostituire i bordi tratteggiati con quelli tratteggiati, ma l'effetto potrebbe non essere così buono. Puoi anche modificare il tipo di contorno durante l'animazione per alcuni altri effetti.