Come animare un bordo tratteggiato con CSS

I bordi decorati possono adornare qualsiasi elemento sulla pagina, ma i bordi CSS sono limitati quando si tratta di stile. Gli sviluppatori spesso presentano 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 di bordo tratteggiata. Il bordo tratteggiato animato verrà creato usando solo il outline e l' box-shadow, senza troppi problemi per quanto riguarda i fallback, poiché outline è 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.

 .banners {outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; ...} 

Lo outline avrà bisogno di tutti i suoi valori; larghezza, tipo e colore. Il box-shadow solo bisogno del valore di spread che dovrebbe essere uguale alla larghezza del contorno e al suo colore. Sia il contorno che l'ombra della scatola insieme 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, ottenendo 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 la proprietà longhand di outline-color, ma per l'ombra del riquadro dovrai assegnare tutti i valori alla proprietà shorthand per ora.

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

 .banners {outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; animazione: 1s animateBorder infinito; ...} 

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.

 .photos {outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transizione: tutti gli 1; ...} .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 altrettanto buono. Puoi anche modificare il tipo di contorno durante l'animazione per alcuni altri effetti.

Scopri quale tipo di procrastinatore sei [Infografica]

Se stai leggendo questo, probabilmente stai procrastinando. Inoltre, probabilmente è meglio che tu stia procrastinando su di noi che su qualsiasi sito di social network. Sul serio, se le scadenze sono sempre fuori dalla tua portata, il tuo lavoro è pieno di errori, ed è normale che tu non abbia nuovi progressi nell'aggiornare il tuo team leader, potresti avere un problema.Ce

(Consigli tecnici e di design)

10 cuffie wireless che cambieranno il modo in cui ascoltiamo

Per la maggior parte di noi, gli auricolari sono un must per i pendolari e le corse, in lunghe code e in attesa di amici, o semplicemente per rilassarsi e destarsi dopo una dura giornata di lavoro. Ascoltiamo i nostri brani preferiti, audiolibri, podcast, notizie e altro, e in questa era di dispositivi wireless, l'auricolare wireless lancia il problema dei cavi indisciplinati e aggrovigliati fuori dalla finestra

(Consigli tecnici e di design)