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.

Servizi di localizzazione di Facebook: cosa devi sapere

Gli utenti dell'app mobile di Facebook sono probabilmente consapevoli del fatto che l' app di social media offre determinati servizi basati sulla posizione . Ti consente di condividere la tua posizione con i tuoi amici e, più recentemente, trovare gli spot Wi-Fi nella tua zona.Quindi, come fa Facebook a fare questo?

(Consigli tecnici e di design)

Bellissimi sfondi di Ramadan per il tuo desktop

Il Ramadan è un mese di benedizioni e preghiere. In questo mese, i musulmani di tutto il mondo digiunano durante il giorno. Tutti i tipi di cibo e bevande sono vietati dall'alba al tramonto o di giorno. È un mese di gentilezza che si conclude con uno dei più grandi festival del calendario musulmano, l'Eid-Ul-Fitr. L

(Consigli tecnici e di design)